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

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

div {
  float: left;
}

Например, когда браузер полностью максимизируется divs выстраиваются в линию как это:

|div| |div| |div| |div| |div| |div| |div| |div|

Но когда браузер изменил размер меньший, это происходит:

|div| |div| |div| |div| |div|
|div| |div| |div|

Как я могу сделать divs не переносятся, когда браузер изменен меньший?

39
задан Shree 18 April 2019 в 08:35
поделиться

2 ответа

Оберните их в другой блок 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, чтобы его высота соответствовала дочернему с плавающей точкой.

26
ответ дан 27 November 2019 в 02:36
поделиться

Сделайте контейнер div вокруг них

.container {
width: 500px;
white-space: nowrap;
overflow: visible/hidden/scroll - whichever suits you;
}
9
ответ дан 27 November 2019 в 02:36
поделиться