老师，我这个是什么问题，第二行把第一行的文字覆盖了

来源：3-4 编程练习

作甚

2018-11-14 22:15:00

<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
     <style>
         *{
             margin:0;
             padding:0;
         }
        .div1,.div2,.div3,.div4,.tdiv5,.div6{text-decoration: none;font-size: 17px;}
         .main{

      width: 810px;

      height: 360px;

      margin-top: 30px;

      margin-left: 30px;

      border:2px green dashed
      padding:10px;
      clear:both;

      }
    .test1{width: 1000px;}

      .div1{width: 260px;height: 135px;float: left;}

      .div2{width: 260px;height: 135px;float: left;}

      .div3{width: 260px;height: 135px;float: left;}

    .test2{width: 1000px;margin-top:20px;}

      .div4{width: 260px;height: 135px;float: left;}

      .div5{width: 260px;height: 135px;float: left;}

      .div6{width: 260px;height: 135px;float: left;}

     </style>   
</head>
<body>   
        <!-- 此处写代码 -->  
        <div class="main">
        <div class="test1">
        <div class="div1"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><p>欢迎来到慕课网学习新知识！</p></div>
        <div class="div2"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><p>欢迎来到慕课网学习新知识！</p></div>
        <div class="div3"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><p>欢迎来到慕课网学习新知识！</p></div>
        </div>
         <div class="test2">
        <div class="div4"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><p>欢迎来到慕课网学习新知识！</p></div>
        <div class="div5"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><p>欢迎来到慕课网学习新知识！</p></div>
        <div class="div6"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><p>欢迎来到慕课网学习新知识！</p></div>
        </div>
        </div>
</body>
</html>

写回答

1回答

好帮手慕查理

2018-11-15

已采纳

您好，高度的原因。代码中设置了div1，div2，div3的高度为135px，但图片的高度就是135px，那么文字在下面，当之后的内容再出现时就会将文字压到。设置test1的高度为180px即可。

当样式相同时，可以使用相同的类名设置样式。下列代码是简化后的代码：

<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
     <style>
         *{
             margin:0;
             padding:0;
         }
         .main{
          width: 810px;
          height: 360px;
          margin-top: 30px;
          margin-left: 30px;
          border:2px green dashed;
          padding:10px;
          clear:both;
          }
          .test1{width: 1000px; height: 180px;}
          .div1{width: 260px;height: 135px;float: left;text-decoration: none;font-size: 17px;}
          .test2{width: 1000px; margin-top:20px;}
     </style>
</head>
<body>
        <!-- 此处写代码 -->
        <div class="main">
        <div class="test1">
        <div class="div1"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><p>欢迎来到慕课网学习新知识！</p></div>
        <div class="div1"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><p>欢迎来到慕课网学习新知识！</p></div>
        <div class="div1"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><p>欢迎来到慕课网学习新知识！</p></div>
        </div>
         <div class="test2">
        <div class="div1"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><p>欢迎来到慕课网学习新知识！</p></div>
        <div class="div1"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><p>欢迎来到慕课网学习新知识！</p></div>
        <div class="div1"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><p>欢迎来到慕课网学习新知识！</p></div>
        </div>
        </div>
</body>
</html>

祝学习愉快！

0 学习 · 4928 问题

查看课程

相似问题

老师我有个问题

回答 1

<img>是块元素还是行内元素？如果是行内元素的话，那么浮动之后还是行内元素么？

回答 1

关于浮动的方法问题

回答 1

其实这里讲的非常不好，什么是脱离文档流？

回答 1

2-9问题，B选项为啥不可以？

回答 1

打开慕课网App查看更多内容