老师，这样实现可以吗
来源：2-7 编程练习
澄月
2019-12-28 17:07:04
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
/*此处写代码*/
*{margin: 0;padding:0;}
.container{width: 902px;height: auto;margin: 0 auto;}
h3{font-family: "黑体";font-size: 26px;word-spacing: 10px;text-align: center;}
.left,.right{float: left;width: 50%;margin-top: 10px;}
img{width: 426px;height: 240px;}
.container p{font-size: 18px;font-weight: bold;text-align: left;width: 426px;word-spacing: 5px;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<h3>ENJOY THE LIFE</h3>
<div class="left">
<img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg">
<p>life is like a book. just read more and more refined. more write more carefully. when read.mind open. all things have been indifferent to heart. life is the precipitation</p>
</div>
<div class="right">
<img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg">
<p>life is like a book. just read more and more refined. more write more carefully. when read.mind open. all things have been indifferent to heart. life is the precipitation</p>
</div>
</div>
</body>
</html>写回答
1回答
-
同学你好，效果是可以的。如果做些小小的改动，会更好些。如下：
给类名为container的元素，清除浮动带来的影响之后，发现第二张图片距离父级的右侧，有间隙。如下图
如果将间隙去掉会更好些。
建议：给左右两侧的内容设置固定的宽度，然后只给左侧的内容设置margin-right值就可以了，代码参考：
祝学习愉快~
0
相似问题