老师，麻烦看下代码效果是否正确。
来源：2-7 编程练习
慕妹4289635
2020-03-11 22:30:07
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
/*此处写代码*/
*{
padding:0;
margin:0;
}
.container{
width:1000px;
height: 1000px;
}
.container h2{
margin-top:20px;
text-align: center;
}
.container .left,.right{
width:420px;
height:800px;
float: left;
padding:20px;
}
.container img{
width:420px;
height: 240px;
}
.container p{
font-size:18px;
font-weight: bold;
font-family: "宋体";
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<h2>ENJOY THE LIFE</h2>
<div class="left">
<dl>
<dd><img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg">
</dd>
<dd><p>Life is like a book,just read more and more refined,more write more carefully.When read,wind open,all things have been indifferent to heart.Life is the precipitation.</p>
</dd>
</dl>
</div>
<div class="right">
<dl>
<dd>
<img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg">
</dd>
</dl>
<dd><p>
Life is like a cup of tea,let people lead
a person to endless aftertastes.You again good taste,it will always have a different taste,different people will hava a different taste more.
</p>
</dd>
</div>
</div>
</body>
</html>写回答
1回答
-
同学你好，代码中的问题如下：
1、大盒子的宽度设置的有点大了，一个图片单元占据的宽度是460px（包括左右的内边距），一行两个，占据的宽度就是920px，所以大盒子的宽度设置920px即可，例：
2、设置的高度太大了，整体使用不了这么大的高度，建议:可以不设置高度，由内容撑开，左右两侧的盒子，可以直接有子元素撑开。外层的大盒子因子元素浮动，高度会塌陷，可以使用overflow: hidden;属性，解决高度塌陷，例：
3、建议：整体可以设置水平居中效果会更好，例：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
1
相似问题