0

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;
}
4

2 に答える 2

2

ここに私の提案があります：

  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が見えない方へ)

于 2013-09-13T21:30:58.427 に答える