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

您好，您可以像这样在 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/