search

Home  >  Q&A  >  body text

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?

过去多啦不再A梦过去多啦不再A梦2734 days ago805

reply all(8)I'll reply

  • 为情所困

    为情所困2017-06-05 11:15:20

    It seems that flex can also be implemented

    reply
    0
  • PHPz

    PHPz2017-06-05 11:15:20

    Small frame: {

    margin: 7.5px;

    }

    Large frame: {

    padding: 7.5px;

    }

    reply
    0
  • 为情所困

    为情所困2017-06-05 11:15:20

    大框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;

    reply
    0
  • 漂亮男人

    漂亮男人2017-06-05 11:15:20

    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

    reply
    0
  • 世界只因有你

    世界只因有你2017-06-05 11:15:20

    flex layout is easy to implement

    reply
    0
  • 習慣沉默

    習慣沉默2017-06-05 11:15:20

    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;

    reply
    0
  • 巴扎黑

    巴扎黑2017-06-05 11:15:20

    <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

    reply
    0
  • PHPz

    PHPz2017-06-05 11:15:20

    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>

    reply
    0
  • Cancelreply