Как Вы делаете DIV, которые пускаются в ход оставленные друг рядом с другом не, переносятся, когда браузер изменен таким образом, что область просмотра становится меньшей?
div {
float: left;
}
Например, когда браузер полностью максимизируется div
s выстраиваются в линию как это:
|div| |div| |div| |div| |div| |div| |div| |div|
Но когда браузер изменил размер меньший, это происходит:
|div| |div| |div| |div| |div|
|div| |div| |div|
Как я могу сделать div
s не переносятся, когда браузер изменен меньший?
Оберните их в другой блок div, для которого указана ширина (или минимальная ширина).
<div class="parentContainer">
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
</div>
.parentContainer {
/* The width of the parent needs to be equal to the total width of the children.
Be sure to include margins/padding/borders in the total. */
width: 600px;
overflow: auto;
}
Также помогает указать overflow: auto в содержащем блоке div, чтобы его высота соответствовала дочернему с плавающей точкой.
Сделайте контейнер div вокруг них
.container {
width: 500px;
white-space: nowrap;
overflow: visible/hidden/scroll - whichever suits you;
}