css - CSS 布局：div 之间没有换行符，即使浏览器窗口太小

Question

我知道这并不完全是一个新话题，但我所有的研究都没有结果。

我试图完成的事情：

1. 一个 div 中的两个 div，彼此相邻。（简单：浮动，内联块）

2. 如果浏览器窗口很小，则 div 应该彼此相邻。

现在发生的情况：如果浏览器窗口不够宽，第二个 div 会滑到第一个下面。

示例： http: //pastebin.com/e9cuWjwT

我该如何解决？

Answer 1

如果您为 div 周围的容器添加宽度，即使屏幕空间变小，它们也会彼此相邻。因为您已经告诉浏览器您希望容器有多大，所以调整屏幕大小不会影响它们的位置。

这是一个非常简化的代码，以显示一个有效的场景：

http://jsfiddle.net/Lera/CmJhw/1/

CSS：

.wrapper {
   width:1024px;
}
div {
   display: inline-block;
}

HTML：

<div class="wrapper">
    <div>First Div</div>
    <div>Second Div</div>
</div>

Answer 2

您可以尝试以下方法：

HTML：

<div>
    <div class="selection">Menu 1</div>
    <div class="selection">Menu 2</div>
    <div class="selection">Menu 3</div>
<div>

CSS：

div {
    border: 1px solid #CCC;
    display: table;
    width: 100%; /* set to what you need */
}
div > div {
    display: table-cell;
    vertical-align: top;
}

表格单元格将始终保持在一行中，并且它们的宽度将随着父块的宽度（带有display: table）调整到浏览器的宽度而调整。