javascript - There are three boxes in a row. The distance between each box is 15px, and the distance from the white box outside is also 15px. How to write this css?

Question

Answer 1

It seems that flex can also be implemented

Answer 2

Small frame: {

margin: 7.5px;

}

Large frame: {

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

Setting decimals will not take effect. Some browsers will round off, and some will round directly. The answer above is correct. You need to set the last small box separately

Answer 5

flex layout is easy to implement

Answer 6

nth-child(3n){

margin:0 15px;    

},
Padding of the large frame: 15px;
The width of the small frame is (large frame width-60px)/3. This ensures three small frames in each row, and the layout is also fixed. The small frame float:left;margin- bottom: 15px;

Answer 7

<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 Set inner margin padding
dl Set float: left;
dt,dd Set float: left;
The rest is to define the width, height and inner and outer margins of the box

I am a newbie, please correct me if I am wrong

Answer 8

This method is compatible with 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>