余白の設定

Question

CSSの設定について質問です

wiedt:30%のボックスを3つ並べて余白が5%間に入るようにしたいのですがどのようにしたら良いでしょうか？

ボックス 余白 ボックス 余白 ボックス
ボックス 余白 ボックス 余白 ボックス
。。。

って感じです。
隣接セレクタでいけるかな？と思ったのですが、2行目の先頭に余白が入ってしまいます（当然ですよね）。

ちなみにレスポンシブにしたいので画面の横幅が小さくなったら１つのボックスが100％の幅になるようにする予定です。

よろしくお願いします。

Answer 1

<ul class="x-clearFix"> <li></li> <li></li> <li></li> </ul> <style> .x-clearFix:before, .x-clearFix:after { content: " "; display: table; } .x-clearFix:after { clear: both; } .x-clearFix { *zoom: 1; } ul li { width: 100%; background: #333; } @media (min-width: ○px) {// 100%表示したい幅を指定 ul li { float: left; width: 30%; margin-left: 5%; } ul li:nth-child(3n-2) { margin-left: 0; } } </style>

Comments

[D.O]

なるほど
ちょっと複雑で難しかったですけど何とか分かりました。ありがとうございました。

Answer 2

flexbox使わないなら

.box{
    width: 30%;
    height:10px;
    background: blue;
    display: inline-block;}
.box:not(:nth-child(3n-2)){
    margin-left: 5%;}

これでいいかと思います。

幅が一定以下ならという部分は

.box{
    width:100%;}
@media (min-width: 1200px) {
    上のやつ
}

という風にmedia query使えばいいと思います。

Comments

[D.O]

バッチリでしたありがとうございます