2

我很抱歉，我确定这个问题的解决方案必须在这个网站的某个地方，但我不确定要搜索什么词才能找到它。

我正在尝试使用左浮动创建一个图像网格（2 宽 x 无限向下），页面上左右图像之间有空格。我熟悉第一个子命令，我在这里尝试过使用它，但这仅适用于删除第一张图像的左边距，而不是左侧的所有图像。

我该如何排列无限数量的图像（列表将结束，每个页面都不同）数量的图像，外边缘没有空间，但内部有空间？

我的 CSS：

section{
width: 940px;   
min-height: 400px;
margin: 0 auto;
padding: 10px 0 0 0;    
}

.package{
width: 450px;
height: 180px;
background-color: #f1f6fb;
float: left;
margin: 20px 0 20px 40px;
}

.package-image{
margin: 20px;
float: left;
}

.package-description{
width: 255px;
height: 160px;
float: left;
margin-top: -10px;
}

.favourite{
position:relative;
top: 30px;
left: -150px;
}

.first {
margin-left: 0;
}

我的html：

<section>
<div class="package first">
<img class="package-image" src="./images/aeyracakes_sakuraminicakes-_1_medium.jpg">
<img class="favourite" src="./images/favourite-no.png">
<div class="package-description">
<h4>package name</h4>
<h5><a href="#">company name</a></h5>
<p>package description</p>  
</div>  
</div>

<div class="package">
<img class="package-image" src="./images/aeyracakes_sakuraminicakes-_1_medium.jpg">
<img class="favourite" src="./images/favourite-no.png">
<div class="package-description">
<h4>package name</h4>
<h5><a href="#">company name</a></h5>
<p>package description</p>
</div>
</div>

<div class="package">
<img class="package-image" src="./images/aeyracakes_sakuraminicakes-_1_medium.jpg">
<img class="favourite" src="./images/favourite-no.png">
<div class="package-description">
<h4>package name</h4>
<h5><a href="#">company name</a></h5>
<p>package description</p>
</div>
</div>
<div class="clearfix"></div>
</section>

谢谢！

4

1 回答 1

1

在你的包裹上使用 :nth-child(even|odd) 来选择你的左图或右图。

.package:nth-child(odd){
    margin-left: 0;
}
.package:nth-child(even){
    margin-right: 0;
}
于 2013-08-19T01:40:11.277 回答