Вопрос по css, html, css-float – Как заставить плавающие DIV внутри DIV фиксированной ширины продолжать горизонтально?

Question

Вопрос по css, html, css-float – Как заставить плавающие DIV внутри DIV фиксированной ширины продолжать горизонтально?

37

Задан 09 May 2012, 16:33 от mskfisherMatt McCormick

37

У меня есть контейнер DIV с фиксированной высотой и шириной (275x1000px). В этом DIV я хочу поместить несколько плавающих DIV, каждый шириной 300 пикселей, и иметь горизонтальную (ось X) полосу прокрутки, чтобы позволить пользователю прокручивать влево и вправо, чтобы просмотреть все.

Это мой CSS до сих пор:

<code>div#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}

div#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}
</code>

Проблема заключается в том, что плавающие DIV не будут превышать ширину контейнера. После размещения трех плавающих DIV они продолжатся ниже. Если я переключу overflow-y на auto, появится вертикальная полоса прокрутки, и я смогу прокрутить вниз.

Как я могу изменить это, чтобы плавающие DIV продолжались, не переходя друг в друга?

9 ответов

Похожие вопросы

от Peter MortensenRony · Answer 1 · 18 Nov 2009, 09:25

Использование:

    div#container {
        overflow: auto;
    }

Или добавьте очищающий div ниже трех div со стилем:

    {
        clear: both
    }

от Tim CooperRon Savage · Answer 2 · 27 Sep 2011, 16:17

<div style='width:1000;border:2 solid red;overflow-x:auto'>
   <table><tr>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 1&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 2&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 3&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 4&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 5&nbsp;</div></td>
   </tr></table>
</div>

Редактировать: Я попробовал 3 из этих предложенных решений - все они отлично работают в Google Chrome - но первое (container1) не работает в IE (см. Рисунок) - поэтому решение SPAN получит мой голос :-):

<html>
<body>
<style>
div#container1 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container1 div.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

div#container2 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container2 span.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

div#container3 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container3 div.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

</style>
<p>
<div id='container1'>
      <div class='block'>Cell 1&nbsp;</div>
      <div class='block'>Cell 2&nbsp;</div>
      <div class='block'>Cell 3&nbsp;</div>
      <div class='block'>Cell 4&nbsp;</div>
      <div class='block'>Cell 5&nbsp;</div>
</div>
<p>
<div id='container2'>
      <span class='block'>Cell 1&nbsp;</span>
      <span class='block'>Cell 2&nbsp;</span>
      <span class='block'>Cell 3&nbsp;</span>
      <span class='block'>Cell 4&nbsp;</span>
      <span class='block'>Cell 5&nbsp;</span>
</div>
<p>
<div id='container3'>
   <table><tr>
      <td><div class='block'>Cell 1&nbsp;</div></td>
      <td><div class='block'>Cell 2&nbsp;</div></td>
      <td><div class='block'>Cell 3&nbsp;</div></td>
      <td><div class='block'>Cell 4&nbsp;</div></td>
      <td><div class='block'>Cell 5&nbsp;</div></td>
   </tr></table>
</div>
</body>
</html>

Изменить 2:

Я запустил эту тестовую страницу через browsershots.org, чтобы увидеть, как разные браузеры справляются с ней. Вывод: совместимость браузера отстой. :-)

http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm

Табличное решение работало чаще, но опция span (которая является более чистой) не работала только в тех браузерах, о которых я никогда не слышал. :-)

от Rajaprabhu AravindasamyMatthew James Taylor · Answer 3 · 02 May 2016, 06:59

чтобы содержать блоки, тогда они будут расширяться шире, чем контейнерный div, и не будут выпадать до новой строки.

The HTML:

<div id="container">
    <div id="width">
        <div class="block">
            <!-- contents of block -->
        </div>
        <div class="block">
            <!-- contents of block -->
        </div>
        <div class="block">
            <!-- contents of block -->
        </div>
        <!-- more blocks here -->
    </div>
</div>

The CSS:

#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}
#container #width {
    width:2000px; /* make this the width you need for x number of blocks */
}
#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}

от user2639797 · Answer 4 · 31 Jul 2013, 21:24

ширина div: 850 пикселей вид сетки templatedcolumn ItemTemplate

<span class="buttonspanlt"></span><asp:Button ID="imgEditSave" runat="server" Text="Edit SubStatus" CssClass="buttoncenter" OnClick="imgEditSave_OnClick"/><span class="buttonspanrt"></span>
<span style="display:none;float:left;clear:left;" id="spangrdCancel" runat="server"><span class="buttonspanlt"></span><asp:Button ID="imgCancel" runat="server" Text="Cancel" class="buttoncenter"/><span class="buttonspanrt"></span></span>

конец ItemTemplate конец шаблонной колонны конец сетки конец div

кнопка имеет средний левый (фактическая кнопка) правый промежуток, который не плавал, как был внешний div с фиксированной шириной.

Мне пришлось использовать дополнительный div с шириной 140px за пределами кнопки, внутри itemtemplate, тогда это работало.

Надеюсь это поможет!!!

Благодарю вас Хариш

от praisegeek · Answer 5 · 16 Jan 2015, 10:40

#row {
    white-space: nowrap; /* important */
    overflow: auto;
}

.    display: inline-block;
}

<div id="row">
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 1" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 2" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 3" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 4" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 5" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 6" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 7" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 8" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 9" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 10" />
    </div>
</div>

Хитрость здесь заключается в том, что «пробел: сейчас» свойство родителя, которое просто сообщает всем его дочерним элементам, чтобы они продолжали горизонтально, и "display: inline-block" quot; собственность детей. Вам не нужно добавлять какие-либо другие свойства, чтобы сделать эту работу.

JS Fiddle:http://jsfiddle.net/2c4jfetf/

от Peter MortensenSkyLar · Answer 6 · 18 Nov 2009, 09:11

Похоже, вы делаете галерею с div'ами?

Для чего именно вы используете div?

Может быть проще использовать ul / li с пролетами внутри li, чтобы получить тот же эффект без головной боли плавающих div.

от pd. · Answer 7 · 19 Jun 2009, 00:23

div#container {
    height: 275px;
    width: 1000px;
    overflow: auto;
    white-space: nowrap;
}

div#container span.block {
    width: 300px;
    display: inline-block;
}

что только элементы, которые ведут себя как встроенные по умолчанию, будут работать правильно, если в Internet Explorer установлено значение inline-block, поэтому внутренние контейнеры должны быть & lt; span & gt; вместо & lt; div & gt ;.

от Emily · Answer 8 · 19 Jun 2009, 00:39

Оберните ваши плавающие div в другой div с более широкой шириной.

<div style="width:230px;overflow-x:auto;background-color:#ccc;">
    <div style="width:400px">
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>,
    </div>
</div>

от jeroen · Answer 9 · 19 Jun 2009, 00:18

Настольное решение должно работать очень хорошо.

Если вы не хотите использовать таблицы, вы также можете поместить все div .block в другой div внутри #container и указать это в качестве «промежуточного div». фиксированная - рассчитанная - ширина с использованием JavaScript после загрузки страницы.

Конечно, если вы уже знаете, сколько у вас блоков. / Если число является фиксированным, вы можете указать & quot; промежуточный-div & quot; фиксированная ширина с использованием CSS.