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

85

Я хочу иметь ряд 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 css-float word-wrap Николай
источник
1
у вас сработал один из ответов ниже? Я не добился успеха ни с одним из них.
Джон Фицпатрик
Я просто перепробовал все ответы, и ни один из них не помог мне. Проблема заключалась в том, что мне нужно было центрировать два плавающих левых div и не допустить, чтобы один справа сдвинулся ниже влево после изменения размера окна.
Bashevis
@Nicholas Я думаю, что мой пример - это именно то, что вы ищете, сегодня я столкнулся с той же проблемой. Выпадающие меню переполняются, но первый уровень не переносится.
Джон

Ответы:

109

Свойство 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>
Кальвин
источник
1
Добавьте <!DOCTYPE html>или <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">в верхнюю часть HTML, чтобы IE не работал по умолчанию в режиме совместимости.
Cees Timmerman
4
Примечание: у меня были мои div-ы с типом ячеек, настроенные с помощью float: left, и это заставило вычисляемый стиль быть блочным, а не строковым. Потребовалось время, чтобы понять, поэтому подумал, что лучше поделиться этим.
Стив Хибберт,
Это не работает с последней ячейкой float: right, не так ли?
Энди
3
На самом деле это не пример того, как уберечь плавающие блоки от упаковки - вы просто разогнали ячейки. У меня есть макет с левым и правым поплавками, поэтому я не могу отказаться от них, чтобы решить проблему с упаковкой.
Энди,
Ха-ха, достаточно честно. Различие педантично, но вы правы. Я не решил «остановить обтекание плавающих блоков», я решил настоящий вопрос спрашивающего «как заставить работать мой макет». Чтобы ответить на первый вопрос: я достаточно уверен, что нет никакого способа предотвратить перенос плавающих div. Как и спрашивающему, вам нужно будет найти другой способ кодирования макета, который вы описываете.
Calvin
32

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

Farooq
источник
1
Это будет работать даже с поплавками. Думаю, это настоящий ответ.
Danon
2
Согласитесь с @Danon - это работает, тогда как встроенный блок вносит проблемы с вертикальным выравниванием.
dlchambers
1
Зависит от ваших потребностей. Это мешает обтеканию плавающих элементов div при изменении размера страницы, но спрашивающий заявил: «Я не хочу указывать ширину строки, ширина должна автоматически совпадать с шириной ее дочерних ячеек». Указание ширины вручную требует некоторой дублированной работы, так как вам нужно вычислить общую ширину строки. Хуже того, если ваши ячейки имеют переменную ширину (скажем, потому что они имеют размер, равный строке текста внутри них), то вычисление итоговой суммы может быть непрактичным или невозможным.
Calvin
1
-1; Это противоречит тому, что OP конкретно заявил в своем вопросе, а именно НЕ указывает ширину. +1 к комментарию Кальвина выше.
Теодор Санду
5

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

<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>
Кевин ЛеБлан
источник
Это устранило мою проблему с перетаскиваемыми div на iphone. Когда в div было больше одного слова, и они были перетащены к краю экрана, div переносился так, чтобы в любой строке было слово. В любом случае overflow: visible; white-space: nowrap;помогло мне. Благодаря!
TryHarder
4
Это сработало, потому что он спустил клетки. На самом деле это не решение, чтобы не допустить обертывания фактически плавающих div
Энди,
1

Единственный способ, которым мне удалось это сделать, - использовать 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>
Джон
источник
Когда я использую upvoted ответ и заменить width:100%с width:1000pxним работает для меня
Nick.McDermaid
@ Nick.McDermaid Я использовал 20K пикселей по какой-то причине, когда выходят экраны 4K, вы знаете, что в конечном итоге будет 8K и так далее, поэтому лучше работать с безумно большим числом, чтобы оно работало в течение тех дополнительных лет, пока экраны не станут более высокими -разрешимость, чем сама жизнь. ;-)
Джон
Разобрался ... Я просто рада, что перестала заворачивать. CSS-это сводит меня с ума даже с инструментами F12. Я не знаю, как кто-то мог что-то делать без них.
Nick.McDermaid
1
Для справки в будущем: использование огромной ширины / высоты крайне неэффективно, потому что браузер по-прежнему сохраняет в памяти ненужный большой ящик. Установите контейнер white-space: nowrap;и дочерние элементы, display: inline-block;как уже было сказано в других ответах (или вернитесь к display: table;и display: table-cell;).
Гё,
main > * > * {background-color: #000;}O_o
theflowersoftime
0

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

Спиколинн
источник
1
display:absolute
неверный
Вероятно, имелась в виду позиция
Ваальян
-1

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

Джим
источник