css - IE8：让 DIV 向左浮动

Question

在 IE8 中，我试图将 4 个子 div 与父 div 并排显示。我希望父 div 溢出并水平滚动，并且子 div 也可以水平相邻。谢谢

HTML：

<div id="a">
    <div class="b">One</div>
    <div class="b">Two</div>
    <div class="b">Three</div>
    <div class="b">Four</div>
</div>

和 CSS：

#a{
    position:relative;
    height:130px;
    width:800px;  
    background:purple;
    overflow:auto;
}
.b{
    position:relative;
    display:inline-block;
    height:100px;
    width:400px;  
    background:red;
    border:1px solid #000000; 
    float:left;
}

Answer 1

以下是我的建议：

1. 用于classes重复元素。ids是唯一的，但classes可以多次使用。
2. 使用inline-block 代替，而float不是添加。
3. 设置white-space:nowrap在容器上以防止儿童包裹。

<div id="a">
    <div class="b">One</div>
    <div class="b">Two</div>
    <div class="b">Three</div>
    <div class="b">Four</div>
</div>

#a{
    height:130px;
    width:800px;
    background:purple;
    overflow:auto;
    white-space:nowrap;
}
.b{
    height:100px;
    width:400px;  
    background:red;
    border:1px solid #000000;
    display:inline-block;
}

http://jsfiddle.net/X2Rjn/2/

http://cssdesk.com/exMH4（对于那些看不到 jsfiddle 的人）

Answer 2

这是一个浮动变体：

<div class="a">
    <div class="wrapper">
        <div class="b">One</div>
        <div class="b">Two</div>
        <div class="b">Three</div>
        <div class="b">Four</div>
    </div>

.a{
    height: 130px;
    width: 800px;
    overflow: scroll;
    background: purple;
}
.wrapper{
    width: 1608px;  
}
.b{
    height: 100px;
    width: 400px;  
    background: red;
    border: 1px solid #000000; 
    float: left;
}

http://jsfiddle.net/BYLFn/3/