老师，为什么用dl dt dd来做GALLERY这部分时候，img的大小值设定了，但是不能显示。

老师，为什么用dl dt dd来做GALLERY这部分时候，img的大小值设定了，但是不能显示。在浏览器上查还是图片自带的大小

慕用6222994 2020-05-07

源自：项目：网页布局案例 2-10 作业题

收起

3回答

好帮手慕码 2020-05-10 14:25:58

同学你好，理解正确。继续加油，祝学习愉快~

收起回答

好帮手慕码 2020-05-09 10:45:56

同学你好，解答如下：

dd、dt标签都是块级标签，所以需要浮动才能显示在一起。但是都设置浮动的话，结构如下：

并且dd标签具有默认的样式：

这部分建议使用div和p去实现。如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页布局作业</title>
   <style type="text/css">
  .picAndDes .icon2 {
    float: left;
    margin: 15px;
    background: #000;
  }
  .picAndDes .icon2 .des1 {
    padding:15px;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
  }
</style>
</head>
<body>
   <div class="picAndDes">
        <div class="icon2 ">
          <img src="images/03-01.jpg" alt="">
          <p class="des1">Science Lab</p>
        </div>
        <div class="icon2">
          <img src="images/03-02.jpg" alt="">
          <p class="des1">Indoor Stadium</p>
        </div>
        <div class="icon2">
          <img src="images/03-03.jpg" alt="">
          <p class="des1">Transportation</p>
        </div>
        <div class="icon2 ">
          <img src="images/03-04.jpg" alt="">
          <p class="des1">Kids Room</p>
        </div>
        <div class="icon2">
          <img src="images/03-05.jpg" alt="">
          <p class="des1">Meditation Classes</p>
        </div>
        <div class="icon2">
          <img src="images/03-06.jpg" alt="">
          <p class="des1">Kids Play Ground</p>
        </div>
      </div>
</body>
</html>

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

提问者慕用6222994 #1

也就是，图文并排的时候，都浮动下，就不建议使用dl dd dt。是吗、

2020-05-10 12:11:42

好帮手慕码 2020-05-08 10:24:24

同学你好，查看文字描述猜测是引入图片不对。但是没有代码无法准确解答。建议：把相关代码粘贴到问答区进行测试，以便准备帮助同学答疑哦。

祝学习愉快~

收起回答

提问者慕用6222994 #1

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页布局作业</title> <style type="text/css"> .galley2{widows: 1200px; } img{width: 360px; height:240px; display: inline-block; } dt{float: left;} </style> </head> <body> <div class="galley2"> <dl> <dt><img src="images/03-01.jpg" /></dt> <dd>SCIENCE LAB</dd> <dt><img src="images/03-02.jpg" ></dt> <dd>INDOOR STADIUM</dd> <dt><img src="images/03-03.jpg" ></dt> <dd>TRANSPORTATION</dd> <dt><img src="images/03-04.jpg" ></dt> <dd>KIDS ROOM</dd> <dt><img src="images/03-05.jpg" ></dt> <dd>MEDITATION CLASSES</dd> <dt><img src="images/03-06.jpg" ></dt> <dd>MEDITATION CLASSES</dd> </dl> </div>  <div></div>  </body> </html>

2020-05-09 09:19:35