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

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   ответов
0

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

    div#container {
        overflow: auto;
    }

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

    {
        clear: both
    }
0

<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 (которая является более чистой) не работала только в тех браузерах, о которых я никогда не слышал. :-)

Error: User Rate Limit Exceeded
8

чтобы содержать блоки, тогда они будут расширяться шире, чем контейнерный 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;
}
@ Алекс, приятно видеть здесь австралийца! Спасибо за отзыв;)
Привет, это Мэтью Джеймс Тейлор! Я считаю ваш сайт очень полезным ресурсом. И хороший ответ +1
@ Возможно, вы правы, версия span может быть лучшей, за исключением того, что это может быть недопустимый HTML для размещения элементов уровня блока внутри встроенных элементов. Смотрите этот вопрос:stackoverflow.com/questions/746531/…
Отказался, потому что решение SPAN работает лучше и для неограниченного числа внутренних блоков - не нужно знать предполагаемую ширину.
@ Matthew James Taylor Никто не рекомендует решение, которое использует блочный элемент внутри встроенного элемента.
0

ширина 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, тогда это работало.

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

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

6

#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/

0

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

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

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

40
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 ;.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
1

Оберните ваши плавающие 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>
0

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

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

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

В первоначальном вопросе Мэтта говорилось, что он хочет "несколько плавающих div-ов"; поэтому настольное решение, скорее всего, не подходит.
Правда, именно поэтому я предложил решение css / javascript. Мой комментарий о таблицах просто ссылается на решение Рона Сэвиджа, которое будет работать всегда, но использует таблицы.
Вниз проголосовал за предложение таблиц. Это не 1995!
Это просто глупо, вы не знаете, является ли табличное решение подходящим или неуместным, потому что содержимое элементов div / cell нам неизвестно.

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