css - 如何让 3 个 div 显示在一行中，如果我调整浏览器大小不会换行？

Question

请在此处查看演示：http: //jsfiddle.net/Freewind/Vkp4U/

的HTML：

<div class="outer">
    <div class="x">x</div>
    <div class="y">y</div>
    <div class="z">z</div>
</div>​

的CSS：

.outer {
    border: 1px solid black;
    overflow: scroll-x;
}

.x {
    width: 400px;
    border: 1px solid red;
    float:left;
}

.y {
    width: 400px;
    border: 1px solid yellow;
    float:left;
}

.z {
    width: 400px;
    border: 1px solid blue;
    float:left;
}​

如果我将浏览器调整为更小，如何让 3 个内部 div 显示在行中，不会换行？

限制：

1. 不应指定外部 div 的宽度
2. 内部 div 的宽度是固定的

Answer 1

这可能有效：这里的想法是将外部设置为相对位置。现在所有的绝对子 div 都将引用它们的父相对 div。（此处演示：http: //jsfiddle.net/Vkp4U/7/）

.outer {
    border: 1px solid black;
    overflow: scroll-x;
    position:relative;
}

.x {
    width: 400px;
    border: 1px solid red;
    float:left;
    position:absolute;
    left:0px;
}

.y {
    width: 400px;
    border: 1px solid yellow;
    float:left;
    position:absolute;
    left:400px;
}

.z {
    width: 400px;
    border: 1px solid blue;
    float:left;
    position:absolute;
    left:800px;
}​

Answer 2

在 CSS 宽度中使用 %...

.outer {
    border: 1px solid black;
    overflow: scroll-x;
}

.x {
    width: 30%;
    border: 1px solid red;
    float:left;
}

.y {
    width: 30%;
    border: 1px solid yellow;
    float:left;
}

.z {
    width: 30%;
    border: 1px solid blue;
    float:left;
}​

Answer 3

嗨，您可以像这样在您的 css 属性中定义显示表格和表格单元格

CSS

.outer {
    border: 1px solid black;
    overflow: scroll-x;

    display:table;
}

.x {
    width: 400px;
    border: 1px solid red;
    display:table-cell;
}

.y {
    width: 400px;
    border: 1px solid yellow;
    display:table-cell;
}

.z {
    width: 400px;
    border: 1px solid blue;
    display:table-cell;
}

HTML

<div class="outer">
<div class="x">x</div>
<div class="y">y</div>
<div class="z">z</div>
</div>​
​

现场演示http://jsfiddle.net/Vkp4U/5/