为情所困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;
漂亮男人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
習慣沉默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;
巴扎黑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
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>