Question

我在水平线上有4张照片。前3张图片有margin-right: 20px;。除了最后没有保证金的图片。我就是这样做的，我觉得可以做得更好：

.threeimg {
margin-right: 20px;
border: 1px solid #cfcfcf;
border-radius: 6px;
background-color: white;
padding: 8px; }


.lastimg {
border: 1px solid #cfcfcf;
border-radius: 6px;
background-color: white;
padding: 8px; }

有什么方法可以清理它吗？请不要对我太过刻薄，3天前我开始学习HTML＆amp; CSS。

Answer 1

这样做：DEMO

<强> CSS

.image {
    margin-right: 20px;
    border: 1px solid #cfcfcf;
    width: 100px;
    border-radius: 6px;
    background-color: white;
    padding: 8px;
}
.no-margin {
    margin-right: 0;    
}

<强> HTML

<img src="http://goo.gl/UEZSH" class="image">
<img src="http://goo.gl/UEZSH" class="image">
<img src="http://goo.gl/UEZSH" class="image">
<img src="http://goo.gl/UEZSH" class="image no-margin">

修改

注意：由于CSS的级联性质，.no-margin类应低于.image类

Answer 2

我总是尽可能简单地编写代码，特别是html代码。与后端编码器的合作将更容易。我删除了类无边距并使用第一个子属性。代码如下，试一试。

CSS

  .image {
        margin-left: 20px;
        border: 1px solid #cfcfcf;
        width: 100px;
        border-radius: 6px;
        background-color: white;
        padding: 8px;
    }
    .image:first-child {
        margin-left: 0;
    }

<强> HTML

<img src="http://goo.gl/UEZSH" class="image">
<img src="http://goo.gl/UEZSH" class="image">
<img src="http://goo.gl/UEZSH" class="image">
<img src="http://goo.gl/UEZSH" class="image">

<强>样本

http://jsfiddle.net/ppqCD/

Answer 3

使用css伪类选择器

img {
    margin-right: 20px;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    background-color: white;
    padding: 8px; 
}

img:last-child {
    margin-right:0px;
}

Answer 4

.img {
    margin: 0;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    background-color: white;
    padding: 8px; 
}

.threeimg {
    margin-right: 20px; 
}

我们在这里有更多的例子。 http://www.html5database.com/example-css.php

CSS结合了两个类

4 个答案:

修改