3

1行に配置する必要のあるアイコンが3つあります。CSSを使用してこれを実現するにはどうすればよいですか？

HTMLは次のとおりです。

<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>

そして、以下は私がすでに持っているCSSです：

.icon {
    min-height: 20px;
    max-width: 20px;
    min-width: 20px;
    display:inline-block;
    background-color: red;
    border-style:dashed;
    border-width: 1px;
}
.icon:nth-child(3n+0) {
    clear:right;
    display:block;
}

上記のコードでは、1行に2つのアイコンが表示され、次の行に1つのアイコンが表示され、次の行に2つのアイコンが表示されます。

私が望んでいるのは、各行に3つのアイコンがあることです。

4

4 に答える 4

2

これは機能しています>> jsfiddle

<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>


.icon {
    min-height: 20px;
    max-width: 20px;
    min-width: 20px;
    display:inline;
    background-color: red;
    border-style:dashed;
    border-width: 1px;
    float:left;
}
.icon:nth-child(3n+1) {
    clear:left;
}
于 2013-03-06T15:00:27.407 に答える
2

親要素float: leftに固定して使用しないのはなぜですか? フィドルwidth

于 2013-03-06T14:19:15.133 に答える
1

最大幅がアイコン要素の幅の 4 倍未満の要素でアイコンをラップすると (ブラウザ間のボックス モデルの違いに対処するため)、処理が行われます。ここにフィドルがあります。

.icon{max-width:70px;}
.icon span {
    height: 20px;
    width: 20px;
    display: inline-block;
    background-color: red;
    border-style:dashed;
    border-width: 1px;
}
.icon span:nth-child(3n+3) {
    background-color:blue; /*just to highlight it*/
}

<div class='icon'>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
于 2013-03-06T15:01:53.470 に答える
0

を使用し3n+1ます。CSS では、要素のインデックスは 1 ベースです。

サイドノート: どうしたのmin-width:20px; max-width:20px? なぜ入れないのwidth:20pxですか？

于 2013-03-06T14:17:06.027 に答える