問題描述

問題解答

貌似 flex 也能實現

小框：{

margin: 7.5px;

}

大框：{

padding: 7.5px;

}

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

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

flex布局 很好實現

nth-child(3n){

margin:0 15px;

},大框的padding:15px;小框的寬度為（大框寬度-60px)/3這樣就能保證每行三個小框，布局也是固定的，小框float:left;margin-bottom: 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 設置內邊距 paddingdl 設置 float：left;dt,dd 設置float:left;剩下的就是定義盒子的寬度高度 以及內外邊距

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

本方法兼容到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>