0

私は 8 つの div を持っており、それらをすべて同じ行に配置してコンテナーからオーバーフローさせたいので、すべて左にフローティングしています。なんらかの理由でペアになっていますが、その理由はよくわかりません。これがjsfiddle http://jsfiddle.net/wp9jB/です

コードは次のとおりです。

.standard_containers {
width:275px;
padding-top:15px;
padding-right:10px;
padding-left:10px;
padding-bottom:15px;
float:left;
margin-left:7px;
margin-right:7px;
}

<div style="width:690px;border:1px solid red;position:relative;">


<div class="standard_containers shadow gradient_2">

<p class="head_med_blue">Physical Thearpy Protocols</p>

</div>

<div class="standard_containers shadow gradient_2">

<p class="head_med_blue">Physical Thearpy Protocols</p>

</div>



<div class="standard_containers shadow gradient_2">

<p class="head_med_blue">Physical Thearpy Protocols</p>

</div>

<div class="standard_containers shadow gradient_2">

<p class="head_med_blue">Physical Thearpy Protocols</p>

</div>



<div class="standard_containers shadow gradient_2">

<p class="head_med_blue">Physical Thearpy Protocols</p>

</div>

<div class="standard_containers shadow gradient_2">

<p class="head_med_blue">Physical Thearpy Protocols</p>

</div>



<div class="standard_containers shadow gradient_2">

<p class="head_med_blue">Physical Thearpy Protocols</p>

</div>

<div class="standard_containers shadow gradient_2">

<p class="head_med_blue">Physical Thearpy Protocols</p>

</div>


<br style="clear:both;" />
</div>

な

4

2 に答える 2

1

<div>幅が 690px であるため、これらはペアになっています。1 つの「列」内のすべてのアイテムに対して 320px に設定し、1 つの「行」内のすべてのアイテムに対して 2500px に設定します。

divの幅が 690px でなければならない場合、<div style="width:320px;border:1px solid red;margin-right:370px;">

于 2012-10-16T22:45:31.103 に答える
0

8 つの要素すべてを同じ行の div に収めるには、.standard_container クラスのサイズを小さくする必要があります。

<style type="text/css">
   .standard_containers {
        width:60px;
        padding:15px 6px;
        float:left;
        margin:0 7px;
    } 
</style>

padding-top、padding-bottom、margin-topなどの代わりに、最初の数字が上下、2番目の数字が左右です。

于 2014-08-05T03:06:54.957 に答える