停止将div换行

84

我想有一排的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 
— 尼古拉斯
source
1
以下答案之一对您有用吗？我对他们中的任何一个都没有成功。
— John Fitzpatrick
我只是尝试了所有答案，没有一个对我有用。问题是我需要将两个浮动的div居中，并防止在调整窗口大小后将右侧的一个推到下方。
— 巴什维斯
@Nicholas我想我的例子正是您要寻找的东西，我今天遇到了同样的问题。下拉菜单溢出，但第一层不包装。
— 约翰

Answers:

106

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>
— 加尔文
source
1
在HTML的顶部添加<!DOCTYPE html>或<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">以使IE不会默认为怪癖模式。
— Cees Timmerman
4
注意：我将我的单元格类型div设置为float：left，这强制将计算的样式设置为block而不是inline-block。花了一些时间弄清楚，所以最好与大家分享一下。
— 史蒂夫·希伯特
这不适用于最后一个单元格float: right，对吗？
— 安迪
3
这实际上不是如何防止浮动div换行的示例-您只需将单元浮动即可。我有一个左右浮动的布局，所以我不能不使用浮动来解决包装问题。
— 安迪
哈哈，够公平的。这是古怪的区别，但您是对的。我没有解决“停止从包装中浮出水面的div”，而是解决了问问者的真正问题“如何使布局有效”。回答前者：我有理由确定没有办法防止浮动div包裹。就像询问者一样，您将需要找到一种不同的方式来编码所描述的布局。
— 加尔文
32

您希望min-width在行上进行定义，以便在调整浏览器大小时不会超出该范围并进行包装。

— 法鲁克
source
1
即使使用浮子也可以使用。我认为这是真正的答案。
— 农
2
同意@Danon-起作用，而内联块引入了垂直对齐问题。
— dlchambers，2015年
1
取决于您的需求。调整页面大小时，它的确停止了浮动div的换行，但询问者说“我不想指定行的宽度，该宽度应自动为其子单元格的宽度”。手动指定宽度需要一些重复的工作，因为您需要计算行的总宽度。更糟糕的是，如果单元格的宽度可变（例如，因为它们的大小适合于其中的一行文本），那么计算总数可能是不切实际或不可能的。
— 加尔文，2016年
-1; 这违背了OP在他的问题中明确指出的内容，即不必指定宽度。对上述加尔文的评论+1。
— Teodor Sandu
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>
— 凯文·勒布朗
source
这解决了我在iPhone上使用可拖动div时遇到的问题。当div中包含多个单词并且将它们拖到屏幕边缘时，div会自动换行，以便每一行上都有一个单词。无论如何overflow: visible; white-space: nowrap;为我做了把戏。谢谢！
— TryHarder
4
之所以有效，是因为他使牢房漂浮了起来。并不是让实际浮动的div停止打包的解决方案
— Andy
1

我设法做到这一点的唯一方法是使用overflow: visible;和width: 20000px;在父元素上。我所知道的CSS级别1并没有做到这一点，我拒绝认为我必须将CSS级别3全部投入使用。下面的示例包含18个菜单，这些菜单超出了我的1920x1200分辨率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>
— 约翰
source
当我使用upvoted答案和替换width:100%用width:1000px它为我的作品
— Nick.McDermaid
@ Nick.McDermaid我使用20K像素是有原因的，随着4K屏幕的出现，您知道最终会出现8K，依此类推，所以最好使用一个疯狂的高数字来使其工作额外的几年，直到屏幕更高为止。分辨率比生活本身。;-)
— 约翰·
理解...我很高兴我能停止包装了。CSS-即使使用F12工具也让我发疯。我不知道没有他们怎么能做任何事情。
— Nick.McDermaid 2015年
1
供以后参考：使用较大的宽度/高度效率非常低，因为浏览器仍将不需要的大盒子存储到内存中。如其他答案中所述，将容器设置为white-space: nowrap;并将子项设置display: inline-block;为（或退回到display: table;和display: table-cell;）。
— 乔（Gyo）2015年
main > * > * {background-color: #000;}O_o
— theflowersoftime '16
0

对我来说，（使用引导程序），只是工作的事情是设置display:absolute;z-index:1在最后一个单元格。

— 斯皮科林
source
1
display:absolute无效的CSS
— caiosm1005
-1

我有一个类似的问题，其中边界区域由float：left块和非浮点文本块中的图像组成。该区域具有流体宽度。根据设计，文本将沿着图像的右侧包裹起来。麻烦的是，文本以<h2>标记开头，其第一个单词是小单词“ From”。当我将窗口调整为较小的宽度时，非浮动文本将在一定宽度范围内仅在换行区域的顶部保留单词“ From”，其余文本已被压缩块。我的解决方案是通过使用代码<span style =“ opacity：0;”> x </ span>替换标签后面的空格，使标签的第一个单词变大。效果是制作第一个单词，而不是“ From”，“ FromxNextWord”，看不见的“ x”看起来像一个空格。现在，我的第一个单词足够大，不会被其余的文本块所遗弃。

— 吉姆
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.