大div套多个小div,怎样设置外div的高度自适应?

<body><divstyle="width:580px;height:auto;margin:0auto;background-color:#333"><divstyl... <body>
<div style="width:580px; height:auto; margin:0 auto; background-color:#333">
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div><div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div><div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
</div></body>
大概是这样子,我在大DIV里套了小div(数量不定),设置小div的float为left,并且设置了大div的固定宽度和背景色,但是在高度auto的情况下,完全不显示背景色,除非设置固定高度。
问题就是,如何设置,才能在小DIV列了1、2、3行时随行数变高?
展开
 我来答
娱乐小八卦啊a
高粉答主

2020-05-20 · 娱乐小八卦,天天都知道
娱乐小八卦啊a
采纳数:256 获赞数:117848

向TA提问 私信TA
展开全部

在最后一个div 后面加上 overflow:hidden;如下:

<div style="width:580px; height:auto; margin:0 auto;

<div style="height:100px; width:230px; float:left; margin:20px"></div>

<div style="height:100px; width:230px; float:left; margin:20px"></div>

<div style="height:100px; width:230px; float:left; margin:20px"></div>

<div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>

</div>

扩展资料

DIV height与DIV自适应高度

1、在div标签内使用style属性即可设置此DIV盒子高度样式。

<div style="height:50px">我高度为50px</div> 

解释:以上通过div标签的style属性样式设置height高度样式。

2、外部样式设置指定div盒子高度

此方法是常用的标签外部CSS样式设置对象样式法。可以通过将CSS代码写入CSS文件,再通过HTML引入CSS文件即可使用;也可以直接在HTML源代码内使用style标签设置CSS样式代码。

这里为大家演示html网页源代码内使用style标签设置外部CSS样式。

为了观察效果本div高度height实例,对象div命名为“.divcss5”,宽度为150px,height为80px,css边框为1px蓝色

DIV+CSS小例CSS代码:

<style> 

.divcss5{ height:80px; width:150px; border:1px solid #00F} 

</style> 

彤顺0GO
推荐于2018-02-28 · TA获得超过587个赞
知道小有建树答主
回答量:363
采纳率:0%
帮助的人:281万
展开全部
清除浮动 在最后一个div 后面加上 这句话

<div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>

--------------------------------------------------------------------------------------------------------------------

<body>
<div style="width:580px; height:auto; margin:0 auto; background-color:#333">
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>
</div>
</body>
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
清一色520螺
2015-08-10 · 知道合伙人数码行家
清一色520螺
知道合伙人数码行家
采纳数:3116 获赞数:81497
毕业于海口市第一职业中学,实习期间服役两年、退伍。。开店卖过耳机、发烧两年会DIY耳机。现于新华学网页

向TA提问 私信TA
展开全部
清除浮动 在最后一个div 后面加上 这句话

<div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>

--------------------------------------------------------------------------------------------------------------------

<body>
<div style="width:580px; height:auto; margin:0 auto; background-color:#333">
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>
</div>
</body>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
zhstar111
2012-12-19 · TA获得超过476个赞
知道小有建树答主
回答量:179
采纳率:50%
帮助的人:148万
展开全部
浮动元素撑不起未浮动元素,所以大DIV高度为0,解决办法:
1、清除浮动 前面的兄弟已经说了
2、把大DIV也设置成浮动元素,float:left;(看问题中的代码是要居中,这个就不合适了)
3、给大的DIV加上属性overflow:hidden也可包裹住浮动元素
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
jy07sg
推荐于2016-04-28 · TA获得超过1044个赞
知道小有建树答主
回答量:930
采纳率:0%
帮助的人:732万
展开全部
方法有几种 视情况而定,而overflow:hidden是要加的
<div style="width:580px; margin:0 auto; background-color:#333;overflow:hidden;">
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>

<div style="heighT:0px;overflow:hiddne;clear:both;widtH:100%:"></div>
</div>
上面是第一种
<div style="width:580px; margin:0 auto; background-color:#333;overflow:hidden;padding-bottom:20px;">
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>
<div style="height:100px; width:230px; float:left; background-color:#CCC; margin:20px"></div>

</div>

这样也是可以的
还有一种就是多嵌套一个div不漂浮的,这种比较多层,不喜欢用就不写了~
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(8)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式