还是关于float
来源：4-12 编程练习
言无月
2020-05-10 00:36:56
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/css">
.div{
margin:10px;
float:left;
border:solid 1px gray;
}
p{
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="aaa" style="border:3px dashed;">
<div id="345">
<div class="div">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到啦啦啦啦！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到啦啦啦啦！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到啦啦啦啦！</p>
</div>
</div>
<div id="678">
<div class="div">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到啦啦啦啦！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到啦啦啦啦！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到啦啦啦啦！</p>
</div>
</div>
</div>
</body>
</html>
第一个问题：按理说 id="aaa"的div应该被id="345"和id="678"的div的内容撑起来 可是这里为甚么会只显示一条直线？
第二个问题：在id="aaa"的div的css中加入float：left；的设置 ，为什么就变得可以正常显示 id="aaa"的div变成行级元素 但是不是不能影响在它当中的内容吗
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/css">
.div{
margin:10px;
float:left;
border:solid 1px gray;
}
p{
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="aaa" style="border:3px dashed;float: left;">
<div id="345">
<div class="div">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到啦啦啦啦！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到啦啦啦啦！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到啦啦啦啦！</p>
</div>
</div>
<div id="678">
<div class="div">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到啦啦啦啦！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到啦啦啦啦！</p>
</div>
<div class="div">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到啦啦啦啦！</p>
</div>
</div>
</div>
</body>
</html>
1回答
-
你好，1、会只显示一条直线是因为子元素div设置浮动，float属性会使得元素脱离当前HTML文档流，即当前HTML文档会当作设置float属性的元素不存在。因此也可以看做是父元素内根本没有内容，div在没内容的时候表现正好是高度=0
2、第二种情况也是因为float属性影响
如果解决您的问题请采纳，祝学习愉快！
0
相似问题