请问我这样设置浮动属性到底错在哪？父元素崩坏还是解决不了

weixin_40434598 2017-10-04 03:10:43

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">

.content{width:100%;
height:auto;
border:1px solid #ccc;
padding:10px;
}
.part1{width: 100%;
float:left;
clear: both;
}
.test1,.test2,.test3
{border:1px solid #ccc;
width:200px;
height:auto;
float:left;
margin: 10px;
}
</style>
</head>
<body>
<div class="content">
<div class="part1">
<div class="test1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" width="200px" height="100px">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="test2">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="test3">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>

</div>

</div>
</body>
</html>

...全文

232 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

红枣花生绿豆粥 2017-10-07

打赏
举报

刚才发的又打错了，第二：样式为 .content 的<div>里还要加 overflow:hidden; 不过也可以用其它方式去清除浮动。

红枣花生绿豆粥 2017-10-07

打赏
举报

第一：你第一张图片<img>标签里图片设设置了 width="200px",height="100px" 而另2张没要，其实你在<style>里加个 mg {width:100%},就不用去每个<img>标签去设置了。第二：样式为 .content 的<div>里还要加 ovoverflow:hidden;

hongmei85 2017-10-04

打赏
举报


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gb2312">
        <style type="text/css">
            
            .content{width:100%;
                height:auto;
                border:1px solid #ccc;
                padding:10px;
            }
            .part1{width: 100%;
            	float:left; 
            	clear: both;
            }
            .test1,.test2,.test3
            {border:1px solid #ccc;
                width:200px;
                height:auto;
                float:left;
                margin: 10px;
            }
						img{width:200px;height:100px}
						.clear{clear: both;}
        </style>
</head>
<body>   
         <div class="content">
             <div class="part1">
                 <div class="test1">
                     < img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" width="200px" height="100px">
                     <p>欢迎来到慕课网学习新知识！</p >
                 </div>
                 <div class="test2">
                     < img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
                     <p>欢迎来到慕课网学习新知识！</p >
                 </div>
                 <div class="test3">
                     < img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
                     <p>欢迎来到慕课网学习新知识！</p >
                 </div>
                 
             </div>
						 <div id="" class="clear"></div>
             
         </div>
</body>
</html>

天际的海浪 2017-10-04

打赏
举报

样式没问题，图片固定下大小就好


         <div class="content">
             <div class="part1">
                 <div class="test1">
                     <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" width="200px" height="100px">
                     <p>欢迎来到慕课网学习新知识！</p>
                 </div>
                 <div class="test2">
                     <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" width="200px" height="100px">
                     <p>欢迎来到慕课网学习新知识！</p>
                 </div>
                 <div class="test3">
                     <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" width="200px" height="100px">
                     <p>欢迎来到慕课网学习新知识！</p>
                 </div>
                 
             </div>
             
         </div>