div css中 如何让内容自动撑大盒子 求方法详细点 另附上代码

html-css010

div css中 如何让内容自动撑大盒子 求方法详细点 另附上代码,第1张

<div style="display:inline-block border:1px solid red">文字文字文字</div>

使用display:inline-block 将div呈现为内联元素，为方便显示，我加了border可以显示效果

right是无法只适应填满剩余的高度和宽度的，必须设定right的高度，让right的高度大于left的的高度。

<style>

#main{

width:100%

height:60px

float:left

background:#0F0

}

#left{

height:50px

width:200px

background:#90F

float:left

}

#right{

width:100%

background:#FF0

height:200px

}

</style>

</head>

<body>

<div id="main"></div>

<div id="left">222222222222</div>

<div id="right">11111111111111</div>

</body>

</html>

把html和body属性设置如下，就能自动充满页面：

html,body{    

    height:100%

    width:100%  

    padding:0px          

    border:0px        

    margin:0px                  

}