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>的宽度为 690 像素。将一个“列”中的所有项目设置为 320 像素 - 将一个“行”中的所有项目设置为 2500 像素。

如果 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 等，第一个数字是顶部和底部，第二个数字是左右。

于 2014-08-05T03:06:54.957 回答