老师，这样实现对吗？
来源：2-7 编程练习
Redamancy_Y6
2019-11-30 15:02:22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
/*此处写代码*/
body{
margin:0;
padding:0;
font-family:"微软雅黑";
}
.top{
text-align: center;
font-size: 30px;
font-weight: bold;
}
.body{
width: 872px;
overflow:hidden;
*zoom:1;
margin-left: 524px;
margin-top: 10px;
}
.left{
float: left;
}
.right{
float: left;
margin-left: 20px;
}
p{
margin-top: 0;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="zong">
<div class="top">ENJOY THE LIFE</div>
<div class="body">
<div class="left">
<img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg">
<p>Life is like a cup of teaLife is like a cup of teaLife is like <br/>cup of teaLife is like a cup of teaLife is like a cup of tea<br/>Life is like a cup of teaLife is like a cup of tea</p>
</div>
<div class="right">
<img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg">
<p>Life is like a cup of teaLife is like a cup of teaLife is like <br/>cup of teaLife is like a cup of teaLife is like a cup of tea<br/>Life is like a cup of teaLife is like a cup of tea</p>
</div>
</div>
</div>
</body>
</html>写回答
1回答
-
同学你好，效果是实现了，但是代码还可以再优化下：
1、整体实现水平居中这里，直接设置margin-left值的话，分辨率改变的话（设备不同，分辨率也有区别），这个值可能就无法实现居中，建议：可以使用margin: 0 auto;设置水平居中，例：
2、左右的两个盒子，可以设置固定的宽度（与图片宽度一致），例：
设置了固定的宽度，文字就不需要使用<br>来换行了，文字在这个宽度内，会自动换行，例：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0h019-11-30
相似问题