                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之float浮动

float与display属性

这里有一段菜鸟才会写出的代码：

html：

<!doctype html>

<html>

<head>

<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="right" >right</div>

</div>

</body>

</html>

由于本人是菜鸟，所以就把完整代码贴上来了。注意到上面的display：table-cell了吗？一旦我加上这个属性，我设置的自动居中属性就会失效（margin：0 auto）！换成inline-block也是一样的。这是什么鬼？当然啦，我本意是设计一个左右大小相互适应的布局的……

azure1016

2016-09-02

源自：CSS深入理解之float浮动 6-2

关注问题我要回答

1345

操作

收起

1 回答

叶0528 回答被采纳 +3 积分
2016-09-02

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进行网页布局”之类的。