Html 停止浮动 div 包装
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5616360/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop floating divs from wrapping
提问by Nicholas
I want to have a row of divs (cells) that don't wrap if the browser is too narrow to fit them.
如果浏览器太窄而无法容纳它们，我希望有一排 div（单元格）不会换行。
I've searched Stack, and couldn't find a working answer to what I think should be a simple css question.
我搜索了 Stack，但找不到我认为应该是一个简单 css 问题的有效答案。
The cells have specified width. However I don't want to specify the width of the row, the width should automatically be the width of its child cells.
单元格具有指定的宽度。但是我不想指定行的宽度，宽度应该自动为其子单元格的宽度。
If the viewport is too narrow to accomodate the rows, then the div should overflow with scrollbars.
如果视口太窄而无法容纳行，则 div 应溢出滚动条。
Please provide your answer as working code snippet, as I've tried a lot of the solutions I've seen elsewhere (like specify width: 100% and they don't seem to work).
请提供您的答案作为工作代码片段，因为我已经尝试了很多我在其他地方看到的解决方案（例如指定宽度：100%，但它们似乎不起作用）。
I'm looking for a HTML/CSS only solution, no JavaScript.
我正在寻找一个只有 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>At the moment I'm actually hard coding the width of the row to a really big number.
目前，我实际上正在将行的宽度硬编码为一个非常大的数字。
回答by Calvin
The CSS property display: inline-blockwas designed to address this need. You can read a bit about it here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
CSS 属性display: inline-block旨在满足这一需求。你可以在这里阅读一下：http: //robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
Below is an example of its use. The key elements are that the rowelement has white-space: nowrapand the cellelements have display: inline-block. This example should work on most major browsers; a compatibility table is available here: http://caniuse.com/#feat=inline-block
下面是它的使用示例。关键元素是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>
回答by farooq
You want to define min-widthon row so when it browser is re-sized it does not go below that and wrap.
您想min-width在行上定义，因此当浏览器重新调整大小时，它不会低于该行并换行。
回答by Kevin LeBlanc
After reading John's answer, I discovered the following seemed to work for us (did not require specifying width):
阅读约翰的回答后，我发现以下内容似乎对我们有用（不需要指定宽度）：
<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>
回答by John
The only way I've managed to do this is by using overflow: visible;and width: 20000px;on the parent element. There is no way to do this with CSS level 1 that I'm aware of and I refused to think I'd have to go all gung-ho with CSS level 3. The example below has 18 menus that extend beyond my 1920x1200 resolution LCD, if your screen is larger just duplicate the first tier menu elements or just resize the browser. Alternatively and with slightly lower levels of browser compatibility you could use CSS3 media queries.
我设法做到这一点的唯一方法是在父元素上使用overflow: visible;和width: 20000px;。我所知道的 CSS 级别 1 无法做到这一点，我拒绝认为我必须完全使用 CSS 级别 3。下面的示例有 18 个菜单，超出了我的 1920x1200 分辨率 LCD ，如果您的屏幕较大，只需复制第一层菜单元素或调整浏览器大小。或者，如果浏览器兼容性级别稍低，您可以使用 CSS3 媒体查询。
Here is a full copy/paste example demonstration...
这是一个完整的复制/粘贴示例演示...
<?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>
回答by Spikolynn
For me (using bootstrap), only thing that worked was setting display:absolute;z-index:1on the lastcell.
对我来说（使用引导程序），唯一有效的是display:absolute;z-index:1在最后一个单元格上设置。
回答by Jim
I had a somewhat similar problem where a bounded area consisted of an image in a float:left block and a non-float text block. The area has a fluid width. The text would, by design, wrap up along the right side of the image. The trouble was, the text began with an <h2> tag, the first word of which is the tiny word "From." As I resized the window to a smaller width, the non-floated text would, for a certain range of widths, leave only the word "From" at the top of the wrap area, the rest of the text having been squeezed below the float block. My solution was to make the first word of the tag bigger, by replacing the space that followed it with this code, <span style="opacity:0;">x</span> . The effect was to make the first word, instead of "From", "FromxNextWord", where the "x", being invisible, looked like a space. Now my first word was big enough not to be abandoned by the rest of the text block.
我有一个有点类似的问题，其中一个有界区域由一个 float:left 块和一个非浮动文本块中的图像组成。该区域具有流体宽度。根据设计，文本将沿着图像的右侧环绕。问题是，文本以 <h2> 标签开头，其中的第一个单词是“From”这个小词。当我将窗口调整为较小的宽度时，对于一定的宽度范围，非浮动文本将仅在环绕区域的顶部留下“From”一词，其余文本已被挤压到浮动下方堵塞。我的解决方案是将标签的第一个单词变大，将其后的空格替换为以下代码 <span style="opacity:0;">x</span> 。效果是制作第一个单词，而不是“From”，“FromxNextWord”，其中“x”不可见，看起来像一个空格。现在我的第一个词足够大，不会被文本块的其余部分遗弃。
