float与display属性
azure1016
2016-09-02 11:46
这里有一段菜鸟才会写出的代码：
html：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#father{
width:800px;height:100%;margin:0 auto;padding:10px; background-color:blue;display:table-cell;
}
#left{
float:left; background-color:pink;}
#right{
overflow:hidden;background-color:gray;}
</style>
</head>
<body>
<div id="father">father
<div id="left" >left</div>
<div id="right" >right</div>
</div>
</body>
</html>
由于本人是菜鸟，所以就把完整代码贴上来了。注意到上面的display：table-cell了吗？一旦我加上这个属性，我设置的自动居中属性就会失效（margin：0 auto）！换成inline-block也是一样的。这是什么鬼？当然啦，我本意是设计一个左右大小相互适应的布局的……
1回答
-
- 叶0528
- 2016-09-02 16:33:31
id为father的div,原为块状元素（display:block;），独占一行。当{display:table-cell}或{display:inline-block;}时，#father变为行内元素（display:inline-block;），不能独占一行，{margin:0 auto；}就失效了。
设计一个左右大小相互适应的布局,css可以参考如下：
#father{ width:80%; height:600px; margin:0 auto}
#left{ width:20%; height:600px; background:#ccc; float:left}
#right{ width:80%; height:600px; background:#FCC; float:right}
3. 建议看一下课程：“如何用CSS进行网页布局”之类的。
CSS深入理解之float浮动
75969 学习 · 461 问题
相似问题