Как заставить плавающие DIV внутри DIV фиксированной ширины продолжать горизонтально?
https://stackoverflow.com/questions/1015809
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
У меня есть контейнер DIV с фиксированной высотой и шириной (275x1000 пикселей).В этом DIV я хочу разместить несколько плавающих DIVов шириной 300 пикселей каждый и создать горизонтальную полосу прокрутки (ось X), позволяющую пользователю прокручивать влево и вправо, чтобы просмотреть все.
Это мой CSS на данный момент:
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;
}
Проблема в том, что плавающие DIV не выходят за пределы ширины контейнера.После размещения трех плавающих DIV они продолжат движение ниже.Если я изменю overflow-y на auto, появится вертикальная полоса прокрутки, и я смогу прокрутить вниз.
Как я могу изменить это, чтобы плавающие DIV продолжали работать, не заходя друг под друга?
Решение
div#container {
height: 275px;
width: 1000px;
overflow: auto;
white-space: nowrap;
}
div#container span.block {
width: 300px;
display: inline-block;
}
Хитрость здесь в том, что только элементы, которые ведут себя как встроенные по умолчанию, будут работать правильно, если в Internet Explorer установлено значение inline-block, поэтому внутренние контейнеры должны быть < span > вместо < div >.
Другие советы
Вам понадобится дополнительный div с большой шириной, чтобы содержать блоки, тогда они будут расширяться шире, чем контейнерный div, и не будут выпадать на новую строку.
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>
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;
}
#row {
white-space: nowrap; /* important */
overflow: auto;
}
.items {
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>Хитрость здесь заключается в «пробелах:nowrap» родительского элемента, который просто сообщает всем его дочерним элементам, чтобы они продолжали двигаться по горизонтали, а свойство «display:inline-block» своих дочерних элементов.Вам не нужно добавлять какое-либо другое свойство, чтобы это работало.
JS Скрипка: http://jsfiddle.net/2c4jfetf/
Оберните ваши плавающие 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>
Настольное решение должно работать очень хорошо.
Если вы не хотите использовать таблицы, вы также можете поместить все div .block в другой div внутри #container и задать для этого " in -ween-div " фиксированная - рассчитанная - ширина с использованием JavaScript после загрузки страницы.
Конечно, если вы уже знаете, сколько у вас блоков .b / число фиксировано, вы можете указать " in -ween-div " фиксированная ширина с использованием CSS.
Звучит так, будто вы делаете галерею с div'ами?
Для чего именно вы используете div?
Может быть проще использовать ul / li с пролетами внутри li, чтобы получить тот же эффект без головной боли плавающих элементов div.
Использовать:
div#container {
overflow: auto;
}
Или добавьте очищающий элемент ниже трех элементов со стилем:
{
clear: both
}
Поместите элементы div, которые вы хотите прокрутить, в таблицу следующим образом:
<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 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 2 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 3 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 4 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 5 </div></td>
</tr></table>
</div>
Редактировать:Я попробовал 3 из этих предложенных решений - все они отлично работают в Google Chrome - но первый (контейнер1) не работает в 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 </div>
<div class='block'>Cell 2 </div>
<div class='block'>Cell 3 </div>
<div class='block'>Cell 4 </div>
<div class='block'>Cell 5 </div>
</div>
<p>
<div id='container2'>
<span class='block'>Cell 1 </span>
<span class='block'>Cell 2 </span>
<span class='block'>Cell 3 </span>
<span class='block'>Cell 4 </span>
<span class='block'>Cell 5 </span>
</div>
<p>
<div id='container3'>
<table><tr>
<td><div class='block'>Cell 1 </div></td>
<td><div class='block'>Cell 2 </div></td>
<td><div class='block'>Cell 3 </div></td>
<td><div class='block'>Cell 4 </div></td>
<td><div class='block'>Cell 5 </div></td>
</tr></table>
</div>
</body>
</html>
Редактировать 2:
Я запустил эту тестовую страницу через сайт Browsershots.org, чтобы посмотреть, как с ней справляются разные браузеры.Заключение:Совместимость с браузером отстой.:-)
http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm
Табличное решение работало чаще, но опция span (которая более чистая) не работала только в браузерах, о которых я никогда не слышал.:-)
Мой бывший:
ширина раздела: 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>
end ItemTemplate конец шаблонной колонны конец сетки конец div
кнопка имеет средний левый (фактическая кнопка) правый промежуток, который не плавал, поскольку был внешний div с фиксированной шириной.
Мне пришлось использовать дополнительный div с шириной 140px за пределами кнопки, внутри шаблона элемента, после чего он работал.
Надеюсь, это поможет !!!
Спасибо Хариш
