老师帮忙检查一下，谢谢
来源：2-7 编程练习
慕瓜9075555
2020-02-08 13:54:17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
/*此处写代码*/
*{
margin:0;
padding:0;
}
.middle{
width:700px;
}
.title{
width:100%;
text-align:center;
font-weight:bold;
font-size:20px;
padding:20px 0;
}
.photo{
width:90%;
margin:0 auto;
}
.first,.second{
float:left;
width:50%;
}
.des1{
font-weight:bold;
width:300px;
}
img{
width:300px;
height:150px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="middle">
<div class="title">
ENJOY THE LIFE
</div>
<div class="photo">
<div class="first">
<div class="p1"><img src="http://img1.sycdn.imooc.com\/climg/58f829090001a4b504260240.jpg"/></div>
<div class="des1">jfdsiogioshogosjclxkjlvjos djiovsjdov sdjvosidj vijvisdjfls bijbi s vnx vsjb dbj odjv sndvh bdiviowcoi wjvd jvidjb bhhviidv s djvisdjvos vdis.</div>
</div>
<div class="second">
<div class="p1"><img src="http://img1.sycdn.imooc.com\/climg/58f8290f0001558804260240.jpg"/></div>
<div class="des1">hbshoidvsicn dhsvhi vhdsvh dsdhwid sdvios shcsw vdhdsjk vdi vd viduosuv dvhzkhn vjiod ciosdjv dvhs behoi dnw vdks ew bnd z wiv vdsjiv dvhso ecw vrjs ewhvi biosv.</div>
</div>
</div>
</div>
</body>
</html>
1回答
-
同学你好，布局是可以的，但是样式还需要调整。
优化：代码中添加了背景色测试的
第一张图片左侧没有间隙，第二张图片右侧有间隙，所以是不均衡的。可以调整下，一个设置左浮动，一个设置右浮动
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题