老师麻烦帮我看一下为什么图片和段落没有对齐
来源：2-7 编程练习
慕斯9523191
2020-08-04 23:22:02
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
*{margin:0;padding:0;text-align: center}
.main{width: 892px;margin:0 auto;font-family:serif;font-weight: bold;}
img{display: inline;}
.content{width: 892px;overflow: hidden;}
.left,.right{float:left;width:50%;}
p{text-align: left;}
/*此处写代码*/
</style>
</head>
<body>
<div class="main">
<div class="title">
<h1>ENJOY THE LIFE</h1>
</div>
<div class="content">
<div class="left">
<dl>
<dt></dt>
<dd><img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg">
</dd>
<dd><p>As the number of people using the Internet as an integral part of their daily life grows, it is inevitable that the number of Internet Scams will grow. Unfortunately there are many forms of scams but in this article we will look at three of the most prominent.</p>
</dd>
</dl>
</div>
<div class="right">
<dl>
<dt></dt>
<dd><img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg">
</dd>
<dd><p>As the number of people using the Internet as an integral part of their daily life grows, it is inevitable that the number of Internet Scams will grow. Unfortunately there are many forms of scams but in this article we will look at three of the most prominent.</p>
</dd>
</dl>
</div>
</div>
</div>
<!-- 此处写代码 -->
</body>
</html>
1回答
-
好帮手慕久久
2020-08-05
同学你好，问题解答如下：
由于通配符选择器中，设置了“text-align: center;”，所以图片在dd中是居中对齐的，如下：
而文字是左对齐的，所以二者左侧不对齐。同时left和right的宽度大于图片的宽度，所以文字和图片右侧也不对齐。
可以设置left和right的宽度和图片相等，效果会好些。
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题