停止从包装浮动div
如果浏览器太窄而不适合他们，我想要有一排div（单元格）不包裹。
我已经search了Stack，并找不到我认为应该是一个简单的CSS问题的工作答案。
单元格具有指定的宽度。 但是，我不想指定行的宽度，宽度应该自动成为其子单元格的宽度。
如果视口太窄而不能容纳行，那么div应该用滚动条溢出。
请提供您的答案作为工作代码片段，因为我已经尝试了很多我在别处看到的解决scheme（如指定宽度：100％，他们似乎并没有工作）。
我正在寻找一个HTML / CSS唯一的解决scheme，没有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>
目前我实际上是将行的宽度编码为一个非常大的数字。
CSS属性display: inline-block被devise来解决这个需求。 你可以在这里阅读一下： 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 。 这个例子应该适用于大多数主stream浏览器。 兼容性表格可以在这里find： 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>
你想在行上定义min-width ，所以当浏览器被重新resize时，它不会低于这个值并且换行。
在阅读约翰的回答后，我发现以下似乎为我们工作（不需要指定宽度）：
<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>
我设法做到这一点的唯一方法是使用overflow: visible; 和width: 20000px; 在父元素上。 没有办法做到这一点，我知道的CSS级别1，我不认为我将不得不与CSS级别3所有的工作。下面的例子有18个菜单超出我的1920×1200分辨率LCD ，如果你的屏幕较大，只需复制第一层菜单元素或调整浏览器的大小。 另外，如果浏览器兼容性稍低，则可以使用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>
对我来说（使用bootstrap），只有工作的是在最后一个单元格上设置display:absolute;z-index:1 。
我有一个有点类似的问题，其中一个有限区域包含一个float：left块和一个非浮动文本块的图像。 该地区有一个stream体宽度。 文本将按照devise，沿着图像的右侧进行包装。 麻烦的是，文本以<h2>标签开头，其中的第一个词是“From”这个小字。 当我将窗口的宽度调整为较小的宽度时，非浮动的文本将在一定的宽度范围内只在包装区域的顶部留下单词“From”，其余的文本被挤压到浮动的下方块。 我的解决scheme是通过用下面的代码来replace标签中的第一个单词：<span style =“opacity：0;”> x </ span>。 其效果是使第一个单词，而不是“From”，“FromxNextWord”，其中“x”，看不见，看起来像一个空间。 现在我的第一个字足够大，不会被其余的文本块放弃。
