css - div浮动之后排在一行，在把浮动去掉，把div用display设置成inline-block之后就不能排在一行了。
本文介绍了css - div浮动之后排在一行，在把浮动去掉，把div用display设置成inline-block之后就不能排在一行了。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
去的浮动设置成行级块元素就不能正常布局了。求解
浮动设置的布局源码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{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; }
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
header
</div>
<div class="main">
<div class="left">
left
</div>
<div class="content">
content
</div>
<div class="right">
right
</div>
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>去掉浮动设置成inline-block后的代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{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; }
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
header
</div>
<div class="main">
<div class="left">
left
</div>
<div class="content">
content
</div>
<div class="right">
right
</div>
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
解决方案
right会掉下来是因为left,content,right inline-block后，这三个div之间有了空隙，除掉空隙的办法有很多种，最简单的就是在html中删除div之间空格，其它方法请参考这里
<div class="inline-block"></div><div class="inline-block"></div>
<div class="wrapper">
<div class="header">
header
</div>
<div class="main">
<div class="left">
left
</div><div class="content">
content
</div><div class="right">
right
</div>
</div>
<div class="footer">
footer
</div>
</div>这篇关于css - div浮动之后排在一行，在把浮动去掉，把div用display设置成inline-block之后就不能排在一行了。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
