Остановить обертывание плавающих div

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

Я искал Stack и не смог найти рабочего ответа на то, что, по моему мнению, должно быть простым вопросом css.

Ячейки имеют заданную ширину. Однако я не хочу указывать ширину строки, ширина должна автоматически совпадать с шириной ее дочерних ячеек.

Если область просмотра слишком узкая для размещения строк, тогда div должен переполниться полосами прокрутки.

Пожалуйста, предоставьте свой ответ в виде рабочего фрагмента кода, поскольку я пробовал много решений, которые видел в другом месте (например, укажите ширину: 100%, и они, похоже, не работают).

Я ищу решение только для HTML / CSS, без JavaScript.

.row {
  float: left;
  border: 1px solid yellow;
  width: 100%;
  overflow: auto;
}
.cell {
  float: left;
  border: 1px solid red;
  width: 200px;
  height: 100px;
}
<div class="row">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>

На данный момент я на самом деле жестко кодирую ширину строки очень большим числом.


html word-wrap css-float
person Nicholas    schedule 11.04.2011    source источник
comment
один из ответов ниже сработал для вас? Ни с одним из них я не добился успеха.   -  person John Fitzpatrick    schedule 06.12.2012
comment
Я просто перепробовал все ответы, и ни один из них не помог мне. Проблема заключалась в том, что мне нужно было центрировать два плавающих левых div и не допустить, чтобы один справа сдвинулся ниже влево после изменения размера окна.   -  person Bashevis    schedule 08.02.2013
comment
@Nicholas Я думаю, что мой пример именно то, что вы ищете, сегодня я столкнулся с той же проблемой. Выпадающие меню переполняются, но первый уровень не переносится.   -  person John    schedule 20.09.2014

Ответы (6)


arrow_upward
111
arrow_downward

Свойство CSS display: inline-block было разработано для удовлетворения этой потребности. Вы можете немного прочитать об этом здесь: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Ниже приведен пример его использования. Ключевыми элементами являются то, что элемент row имеет white-space: nowrap, а элементы cell имеют display: inline-block. Этот пример должен работать в большинстве основных браузеров; таблица совместимости доступна здесь: http://caniuse.com/#feat=inline-block

<html>
<body>
<style>

.row {
    float:left;
    border: 1px solid yellow;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    width: 200px;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">a</div>
    <div class="cell">b</div>
    <div class="cell">c</div>
</div>


</body>
</html>
person Calvin    schedule 13.06.2012
comment
Добавьте <!DOCTYPE html> или <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> в верхнюю часть HTML, чтобы IE не работал по умолчанию в режиме совместимости. - person Cees Timmerman; 03.05.2013
comment
Примечание: у меня были мои div-ы с типом ячеек, настроенные с помощью float: left, и это заставило вычисляемый стиль быть блочным, а не строковым. Потребовалось время, чтобы понять, поэтому подумал, что лучше поделиться этим. - person Steve Hibbert; 27.02.2015
comment
Это не работает с последней ячейкой float: right, не так ли? - person Andy; 01.08.2015
comment
На самом деле это не пример того, как уберечь плавающие блоки div от обертывания - вы просто сняли плавающие ячейки. У меня есть макет с некоторыми левыми и правыми поплавками, поэтому я не могу отказаться от них, чтобы решить проблему с упаковкой. - person Andy; 08.08.2015
comment
Ха-ха, достаточно честно. Различие педантично, но вы правы. Я не решил "остановить плавающие" div от упаковки, я решил реальный вопрос спрашивающего, как мне заставить работать мой макет. Чтобы ответить на первый вопрос: я разумно уверен, что нет никакого способа предотвратить обертывание плавающих div. Как и спрашивающему, вам нужно будет найти другой способ кодирования макета, который вы описываете. - person Calvin; 16.08.2015
comment
после добавления white-space: no-wrap в контейнер вы можете добавить white-space: normal; к дочерним элементам, иначе их содержимое будет переполнять их собственное поле. - person user2377141; 28.12.2020

arrow_upward
33
arrow_downward

Вы хотите определить min-width в строке, чтобы при изменении размера браузера он не опускался ниже и не переносился.

person farooq    schedule 09.07.2011
comment
Это будет работать даже с поплавками. Я думаю, это настоящий ответ. - person Danon; 13.01.2015
comment
Согласитесь с @Danon - это работает, тогда как встроенный блок вносит проблемы с вертикальным выравниванием. - person dlchambers; 18.03.2015
comment
Зависит от ваших потребностей. Это останавливает обертывание плавающих div-ов при изменении размера страницы, но спрашивающий заявил, что я не хочу указывать ширину строки, ширина должна автоматически совпадать с шириной ее дочерних ячеек. Указание ширины вручную требует некоторой дублированной работы, так как вам нужно вычислить общую ширину строки. Хуже того, если ваши ячейки имеют переменную ширину (скажем, потому что они имеют размер, равный строке текста внутри них), то вычисление итоговой суммы может быть непрактичным или невозможным. - person Calvin; 24.08.2016
comment
-1; Это идет вразрез с тем, что OP конкретно указал в своем вопросе, а именно НЕ указывать ширину. +1 к комментарию Кальвина выше. - person Teodor Sandu; 19.07.2017

arrow_upward
5
arrow_downward

Прочитав ответ Джона, я обнаружил, что для нас работает следующее (не требует указания ширины):

<style>
.row {
    float:left;
    border: 1px solid yellow;
    overflow: visible;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
</div>
person Kevin LeBlanc    schedule 31.10.2014
comment
Это устранило мою проблему с перетаскиваемыми div на iphone. Когда в div было больше одного слова, и они были перетащены к краю экрана, div переносился так, чтобы в каждой строке было слово. В любом случае overflow: visible; white-space: nowrap; Сработал для меня. Спасибо! - person TryHarder; 13.02.2015
comment
Это сработало, потому что он спустил клетки на воду. На самом деле это не решение, чтобы фактически плавающие div не обертывались - person Andy; 08.08.2015

arrow_upward
2
arrow_downward

Единственный способ сделать это - использовать overflow: visible; и width: 20000px; в родительском элементе. Невозможно сделать это с CSS уровня 1, о котором я знаю, и я отказывался от мысли, что мне придется делать все возможное с CSS уровня 3. В приведенном ниже примере есть 18 меню, которые выходят за пределы моего ЖК-дисплея с разрешением 1920x1200. , если ваш экран больше, просто продублируйте элементы меню первого уровня или просто измените размер браузера. В качестве альтернативы и с немного более низким уровнем совместимости с браузером вы можете использовать медиа-запросы CSS3.

Вот полный демонстрационный пример копирования / вставки ...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML5 Menu Demonstration</title>
<style type="text/css">
* {border: 0; box-sizing: content-box; color: #f0f; font-size: 10px; margin: 0; padding: 0; transition-property: background-color, background-image, border, box-shadow, color, float, opacity, text-align, text-shadow; transition-duration: 0.5s; white-space: nowrap;}
a:link {color: #79b; text-decoration: none;}
a:visited {color: #579;}
a:focus, a:hover {color: #fff; text-decoration: underline;}
body {background-color: #444; overflow-x: hidden;}
body > header {background-color: #000; height: 64px; left: 0; position: absolute; right: 0; z-index: 2;}
body > header > nav {height: 32px; margin-left: 16px;}
body > header > nav a {font-size: 24px;}
main {border-color: transparent; border-style: solid; border-width: 64px 0 0; bottom: 0px; left: 0; overflow-x: hidden !important; overflow-y: auto; position: absolute; right: 0; top: 0; z-index: 1;}
main > * > * {background-color: #000;}
main > section {float: left; margin-top: 16px; width: 100%;}
nav[id='menu'] {overflow: visible; width: 20000px;}
nav[id='menu'] > ul {height: 32px;}
nav[id='menu'] > ul > li {float: left; width: 140px;}
nav[id='menu'] > ul > li > ul {background-color: rgba(0, 0, 0, 0.8); display: none; margin-left: -50px; width: 240px;}
nav[id='menu'] a {display: block; height: 32px; line-height: 32px; text-align: center; white-space: nowrap;}
nav[id='menu'] > ul {float: left; list-style:none;}
nav[id='menu'] ul li:hover ul {display: block;}
p, p *, span, span * {color: #fff;}
p {font-size: 20px; margin: 0 14px 0 14px; padding-bottom: 14px; text-indent: 1.5em;}
.hidden {display: none;}
.width_100 {width: 100%;}
</style>
</head>

<body>

<main>
<section style="height: 2000px;"><p>Hover the first menu at the top-left.</p></section>
</main>

<header>
<nav id="location"><a href="">Example</a><span> - </span><a href="">Blog</a><span> - </span><a href="">Browser Market Share</a></nav>
<nav id="menu">
<ul>
<li><a href="" tabindex="2">Menu 1 - Hover</a>
<ul>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
</ul>
</li>
<li><a href="" tabindex="2">Menu 2</a></li>
<li><a href="" tabindex="2">Menu 3</a></li>
<li><a href="" tabindex="2">Menu 4</a></li>
<li><a href="" tabindex="2">Menu 5</a></li>
<li><a href="" tabindex="2">Menu 6</a></li>
<li><a href="" tabindex="2">Menu 7</a></li>
<li><a href="" tabindex="2">Menu 8</a></li>
<li><a href="" tabindex="2">Menu 9</a></li>
<li><a href="" tabindex="2">Menu 10</a></li>
<li><a href="" tabindex="2">Menu 11</a></li>
<li><a href="" tabindex="2">Menu 12</a></li>
<li><a href="" tabindex="2">Menu 13</a></li>
<li><a href="" tabindex="2">Menu 14</a></li>
<li><a href="" tabindex="2">Menu 15</a></li>
<li><a href="" tabindex="2">Menu 16</a></li>
<li><a href="" tabindex="2">Menu 17</a></li>
<li><a href="" tabindex="2">Menu 18</a></li>
</ul>
</nav>
</header>

</body>
</html>
person John    schedule 20.09.2014
comment
Когда я использую ответ, за который проголосовали, и заменяю width:100% на width:1000px, у меня это работает. - person Nick.McDermaid; 04.01.2015
comment
@ Nick.McDermaid Я использовал 20K пикселей по какой-то причине, когда выходят экраны 4K, вы знаете, что в конечном итоге будет 8K и так далее, поэтому лучше всего работать с безумно большим числом, чтобы оно работало в течение тех дополнительных лет, пока экраны не станут более высокими -разрешимость, чем сама жизнь. ;-) - person John; 05.01.2015
comment
Разобрался ... Я просто рад, что получил перестать заворачиваться. CSS-это сводит меня с ума даже с инструментами F12. Я не знаю, как кто-то мог что-то делать без них. - person Nick.McDermaid; 06.01.2015
comment
Для справки в будущем: использование огромной ширины / высоты крайне неэффективно, потому что браузер по-прежнему сохраняет в памяти ненужный большой ящик. Установите контейнер на white-space: nowrap;, а дочерние элементы на display: inline-block;, как уже было сказано в других ответах (или вернитесь к display: table; и display: table-cell;). - person gyo; 26.10.2015

arrow_upward
0
arrow_downward

Для меня (с использованием начальной загрузки) единственное, что сработало, - это установка display:absolute;z-index:1 в последней ячейке.

person Spikolynn    schedule 01.02.2017
comment
display:absolute недопустимый CSS - person caiosm1005; 27.09.2018
comment
Наверное, имелось ввиду положение - person Vaaljan; 30.11.2020

arrow_upward
-1
arrow_downward

У меня была аналогичная проблема, когда ограниченная область состояла из изображения в блоке float: left и текстовом блоке без float. Область имеет плавную ширину. Текст по замыслу должен оборачиваться по правой стороне изображения. Проблема была в том, что текст начинался с тега ‹h2>, первое слово которого - крошечное слово «From». Когда я изменил размер окна на меньшую ширину, для определенного диапазона ширины не плавающий текст оставил бы только слово «From» в верхней части области переноса, а остальной текст был сжат ниже плавающего объекта. блокировать. Мое решение заключалось в том, чтобы увеличить первое слово тега, заменив следующий за ним пробел этим кодом ‹span style =" opacity: 0; "> x ‹/span>. В результате первое слово вместо «From» было «FromxNextWord», где «x», будучи невидимым, выглядело как пробел. Теперь мое первое слово было достаточно большим, чтобы его не бросила остальная часть текстового блока.

person Jim    schedule 11.05.2013