問(wèn)題描述

問(wèn)題解答

貌似 flex 也能實(shí)現(xiàn)

小框：{

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;

設(shè)置小數(shù)是不會(huì)生效的，有的瀏覽器會(huì)四舍五入，有的會(huì)直接取整，樓上解答正確，要將最后一個(gè)小框單獨(dú)設(shè)置

flex布局 很好實(shí)現(xiàn)

nth-child(3n){

margin:0 15px;

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

初學(xué)新手，如有不對(duì)，大家來(lái)指正哈

本方法兼容到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'>圖標(biāo)</i><p class='name'>標(biāo)題</p><p class='txt'>描述</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li></ul>