我这样写 怎么感觉 文字部分不换行 只能添加 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

你好同学,因为代码中字母都连着一起了,所以浏览器解析的时候会把它们当做一个单词,一个单词默认是不会换行的哦。可以参考如下给字母设置空格就能换行:

http://img.mukewang.com/climg/5d107c480001292a10550216.jpg

另外,建议参考如下进行优化:

标题设置上下间距各一半,让标题不要紧贴浏览器上边缘更好:

http://img.mukewang.com/climg/5d107cad0001614e05030097.jpg

下面的图片盒子宽度修改一下,让两个盒子的宽度与间距加起来恰好为父容器的宽度,间距改变左右各一半,让内容居中显示

http://img.mukewang.com/climg/5d107d4d00011b0108210484.jpg

祝学习愉快 ,望采纳。

0

0 学习 · 40143 问题

查看课程