0

横一列に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; }

これをきれいにする方法はありますか？私は文字通り HTML と CSS の学習を 3 日前に始めました。

4

4 に答える 4

1

私は常にコード、特に html コードを可能な限りシンプルに書くようにしています。バックエンド コーダーとの連携が容易になります。クラス no-margin を削除し、first-child 属性を使用します。コードは以下にあるので、試してみてください。

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/

于 2013-06-15T09:42:19.690 に答える
0

css 疑似クラス セレクターを使用する

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

img:last-child {
    margin-right:0px;
}
于 2013-06-15T09:03:23.957 に答える
0 
.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

于 2013-06-15T09:16:08.590 に答える