Остановить плавающие divs от упаковки

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

Я искал 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>

ОТВЕТЫ

Ответ 1

Свойство 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>

Ответ 2

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

Ответ 3

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

<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>

Ответ 4

Единственное, что мне удалось сделать, это использовать overflow: visible; и width: 20000px; в родительском элементе. Нет никакого способа сделать это с уровнем 1 уровня CSS, о котором я знаю, и я отказался думать, что мне нужно будет пройти весь gung-ho с уровнем CSS 3. В приведенном ниже примере представлено 18 меню, выходящих за пределы моего LCD-дисплея с разрешением 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>

Ответ 5

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

Ответ 6

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