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

以下是我的建议：

对重复的元素使用classes。 ids是唯一的，但classes可以多次使用。
使用inline-block 代替<{em} float，而不是另外。

在容器上设置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/

IE8：让DIV向左浮动

2 个答案: