我这样写 怎么感觉 文字部分不换行 只能添加 br标签自己换行吗
来源:2-7 编程练习
做厉害的人
2019-06-24 15:14:58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编程练习</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 1000px;
height: 1000px;
margin: 0 auto;
}
.container h3 {
text-align: center;
margin-bottom: 80px;
}
.container .content {
width: 1000px;
height: 1000px;
margin-left: 50px;
}
.content .common {
width: 426px;
float: left;
margin-right: 50px;
}
.content .common .desc {
width:426px;
height:50px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<h3>ENJOY THE LIFE</h3>
<div class="content">
<div class="common">
<img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg">
<div class="desc">sdfgsgdfgdjkhfgdkfjghdfkjghdfkgjdfhgkdfghdfgdfgdfgdfgdfgfdgfdgfdgdfg</div>
</div>
<div class="common"><img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg"/>
<div class="desc">sdfgsgdfgdjkhfgdkfjghdfkjghdfkgjdfhgkdfghdfgdfgdfgdfgdfgfdgfdgfdgdfg</div>
</div>
</div>
</div>
</body>
</html>
1回答
好帮手慕夭夭
2019-06-24
你好同学,因为代码中字母都连着一起了,所以浏览器解析的时候会把它们当做一个单词,一个单词默认是不会换行的哦。可以参考如下给字母设置空格就能换行:
另外,建议参考如下进行优化:
标题设置上下间距各一半,让标题不要紧贴浏览器上边缘更好:
下面的图片盒子宽度修改一下,让两个盒子的宽度与间距加起来恰好为父容器的宽度,间距改变左右各一半,让内容居中显示
祝学习愉快 ,望采纳。
相似问题