2017-11-07 07:23:04
在页面中经常会遇到两列的情况,比如说左侧栏固定宽度,右侧栏自适应宽度,此时可以用flex布局的方式,但是这种方式在ie8上不兼容,但是也可以用table。这里我们来说用margin的负值来实现两栏布局。
<div>
<div style="height: 400px;float: left;width: 100%;background: green;">
<div style="margin-left: 200px;">sdfsfdfsd</div>
</div>
<div style="height: 400px;float: left;width: 200px;background: red;margin-left: -100%;"></div>
</div>
如上代码,即可实现一个两列的布局,具体效果就是下图
项目中经常会使用浮动列表展示信息,为了美观通常为每个列表之间设置一定的间距(margin-right),当父元素的宽度固定式,每一行的最右端的li元素的右边距就多余了,去除的方法通常是为最右端的li添加class,设置margin-right:0; 这种方法需要动态判断为哪些li元素添加class,麻烦!!!利用负margin就可以实现下面这种效果:
html:
<div id="test">
<ul>
<li>子元素1</li>
<li>子元素2</li>
<li>子元素3</li>
<li>子元素4</li>
<li>子元素5</li>
<li>子元素6</li>
</ul>
</div>
css:
body,ul,li{ padding:0; margin:0;}
ul,li{ list-style:none;}
#test{
width:320px;
height:210px;
background:#CCC;
}
#test ul{
margin-right:-10px;
zoom:1;
}
#test ul li{
width:100px;
height:100px;
background:#F60;
margin-right:10px;
margin-bottom:10px;
float:left;
}
具体实现效果
列表中我们经常会添加border-bottom值,最后一个li的border-bottom往往会与外边框重合,视觉上不雅观,往往要移除。
HTML
<ul id="test">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
CSS
body,ul,li{margin:0;padding:0;}
ul,li{list-style:none;}
#test{
margin:20px;
width:390px;
background:#F4F8FC;
border-radius:3px;
border:2px solid #D7E2EC;
}
#test li{
height:25px;
line-height:25px;
padding:5px;
border-bottom:1px dotted #D5D5D5;
margin-bottom:-1px;
}
具体实现效果