Зупиніть обтікання плаваючих div

Question 1

Я хочу мати рядок 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>

Розгорніть фрагмент

На даний момент я насправді важко кодую ширину рядка до справді великого числа.

Question 2

Властивість 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>

Question 3

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

Question 4

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

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

Question 5

Єдиний спосіб, яким мені вдалося це зробити, - це використання 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>

Question 6

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

Question 7

У мене була дещо подібна проблема, коли обмежена область складалася із зображення у поплавці: лівий блок та неплаваючий текстовий блок. Площа має ширину рідини. За задумом текст обертається вздовж правої сторони зображення. Проблема полягала в тому, що текст починався з тегу <h2>, першим словом якого є крихітне слово «Від». Оскільки я зменшив розмір вікна до меншої ширини, неплаваючий текст для певного діапазону ширини залишав би лише слово «Від» у верхній частині області обгортання, а решта тексту була стиснута під поплавцем блок. Моє рішення було збільшити перше слово тегу, замінивши простір, що слідував за ним, цим кодом <span style = "opacity: 0;"> x </span>. Ефектом було зробити перше слово, замість "Від", "FromxNextWord", де "х", будучи невидимим, виглядало як простір. Тепер моє перше слово було досить великим, щоб не залишити його решта текстового блоку.