CSS自动适应多个div以跨越页面的大小？

Question

因此我需要多个内衬的div来跨越我的页面，然后在添加另一个div时执行相同的操作。但我不确定如何实现这一目标。一个例子是：

[div 1] [div 2] [div 3] [div 4] [div 5]

然后当添加另一个div时，它不会堆叠在下面，但会减小div的大小以适应空间。

Answer 1

您应该使用display: table-cell。

请参阅： http://jsfiddle.net/2X73J/

浏览器支持非常好：http://caniuse.com/css-table

<div class="multiContainer">
    <div>div 1</div>
    ..
</div>

.multiContainer {
    width: 100%;
    display: table;
    background: #ccc
}
.multiContainer > div {
    display: table-cell;
    border: 1px dashed #f0f
}

Answer 2

试试这个

.Someclass div{
    border:1px solid #000;
    height:20px;
    width:100px;
    display:inline-block;
    margin:0;
    }
<div class="Someclass">
<div>div 1</div><div>div 2</div><div>div 3</div><div>div 4</div>
</div>