这样可以吗？
来源：2-7 编程练习
芥子1204
2019-05-19 11:49:57
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
/*此处写代码*/
html,body,dl,dt,dd{
margin:0;
padding:0;
}
.title{
font-size:20px;
font-weight:bold;
text-align:center;
}
.dl-box{
overflow:hidden;
zoom:1;
width:1000px;
margin:10px auto;
text-align: center;
}
.dl-box dl{
float:left;
width:426px;
margin-left:49.33px;
}
.dl-box dl img{
width:426px;
}
.dl-box dl dd{
font-size:14px;
text-align:left;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="box">
<div class="title">ENJOY THE LIFE</div>
<div class="dl-box">
<dl>
<dt>
<img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg" />
</dt>
<dd>lifre is like a book,just read more and more,lifre is like a aa book,just read more and more,lifre is like a book,just read more and more</dd>
</dl>
<dl>
<dt>
<img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg" />
</dt>
<dd>lifre is like a book,just read more and more,lifre is like a book,just read more and more,lifre is like a book,just read more and more</dd>
</dl>
</div>
</div>
</body>
</html>
1回答
-
你好，代码布局是可以的，图片下方文字不需要居中显示，默认左对齐显示就好。
代码写的有些冗余，可以设置图片一个左浮动，一个右浮动显示，这样就不用调整间距了，参考：
祝学习愉快！欢迎采纳~
0
相似问题