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

Question

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

我试图完成什么：

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

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

现在会发生什么：如果浏览器窗口不够宽，第二个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(的宽度调整到浏览器的宽度而调整。