javascript - 一排三個框，各個框的間距是15px,距離外面的白框間距也是15px，這個css怎麼寫？

Question

##

Answer 1

貌似 flex 也能實現

Answer 2

小框：{

margin: 7.5px;

}

大框：{

padding: 7.5px;

}

Answer 3

大框padding:15px;小框margin-right:15px;margin-bottom:15px;小框nth-child(3n)的margin-right:0;last-child,nth-last-child(2),nth -last-child(3)的margin-bottom:0;

Answer 4

設定小數是不會生效的，有的瀏覽器會四捨五入，有的會直接取整，樓上解答正確，要將最後一個小框單獨設定

Answer 5

flex佈局 很好實現

Answer 6

nth-child(3n){

margin:0 15px;    

},
大框的padding:15px;
小框的寬度為（大框寬度-60px)/3這樣就能保證每行三個小框，佈局也是固定的，小框float:left;margin- bottom: 15px;

Answer 7

<dl>
    <dt>这里是图片</dt>
    <dd><h1></h1><span></span></dd>
</dl>
<dl>
    <dt>这里是图片</dt>
    <dd><h1></h1><span></span></dd>
</dl>
<dl>
    <dt>这里是图片</dt>
    <dd><h1></h1><span></span></dd>
</dl>

p 設定內邊距 padding
dl 設定 float：left;
dt,dd 設定float:left;
剩下的就是定義盒子的寬度高度 以及內外邊距

初學新手，如有不對，大家來指正哈

Answer 8

本方法相容於ie6

<style>
    .list{
        position: relative;
        margin-left: -15px;
        left: 15px;
    }
    .list li{
        width: 300px;
        height: 50px;
        background-color: #ccc;
        margin-right: 15px;
        margin-bottom: 15px;
        float: left;
        padding-left: 100px;
        position: relative;
    }
    .list li .iconfont{
        position: absolute;
        left: 10px;
        top: 20px;
    }
    .list li .name{
        font-size: 14px;
        color: #333;
    }
    .list li .txt{
        font-size: 12px;
        color: #666;
    }
</style>
<ul class="list clearfix">
    <li>
        <i class="iconfont">图标</i>
        <p class="name">标题</p>
        <p class="txt">描述</p>
    </li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>