Nampaknya flex juga boleh dilaksanakan

Bingkai kecil: {

margin: 7.5px;

}

Bingkai besar: {

padding: 7.5px;

}

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

Menetapkan perpuluhan tidak akan berkuat kuasa Sesetengah penyemak imbas akan membundarkan secara langsung Jawapan di tingkat atas adalah betul.

susun atur fleksibel mudah dilaksanakan

anak ke-3(3n){

margin:0 15px;    

},
Peladam bingkai besar: 15px
Lebar bingkai kecil ialah (lebar bingkai besar - 60px)/3 Ini memastikan terdapat tiga bingkai kecil dalam setiap baris, dan reka letak juga tetap . Bingkai kecil terapung: kiri; margin bawah: 15px;

<p>

<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>

p Tetapkan pelapik jidar dalam
dl Set apungan:kiri;
dt,dd Set apungan:kiri;
Selebihnya adalah untuk menentukan lebar, tinggi dan jidar dalam dan luar kotak# 🎜🎜#

Kaedah ini serasi dengan 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>