IE8：让DIV向左浮动

Question

在IE8中，我试图与父div一起显示4个子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 代替<{em} 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/