去的浮动设置成行级块元素就不能正常布局了。求解
浮动设置的布局源码
*{margin:0; padding:0; }
.wrapper {width:980px; margin:20px auto 0; border:1px solid #ccc; }
.header {height:74px; background:#A94E38; text-align:center;line-height:74px;}
.left {width:200px; background:#eee;height:400px;}
.right {width:200px; background:#eee;height:400px;}
.content {width:580px;height:400px; background:green; float:left; }
.left {float:left;}
.right{float:left;}
.footer {height:50px; background:#7082C2;text-align:center;line-height:50px; clear:both; }
header
left
content
right
去掉浮动设置成inline-block后的代码
*{margin:0; padding:0; }
.wrapper {width:980px; margin:20px auto 0; border:1px solid #ccc; }
.header {height:74px; background:#A94E38; text-align:center;line-height:74px;}
.left {width:200px; background:#eee;height:400px;}
.right {width:200px; background:#eee;height:400px;}
.content {width:580px;height:400px; background:green; display:inline-block; }
.left {display:inline-block;}
.right{display:inline-block;}
.footer {height:50px; background:#7082C2;text-align:center;line-height:50px; }
header
left
content
right