[已解决]请教大佬帮我看看为啥div没有效果

czh6541 · 发表于 2022-9-30 18:23:40

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
      h1.title {
         background-color: pink;
         text-align: center;
      }

      img {
         width: 50px;
         position: relative;
         top: 10px;
      }

      table.left,
      td.left,
      th.left {
         border: 2px lightcoral solid;
         border-collapse: collapse;
         font-weight: bold;
      }

      table.center,
      td.center,
      th.center {
         border: 2px lightgreen solid;
         border-collapse: collapse;
         font-weight: bold;
      }

      table.right,
      td.right,
      th.right {
         border: 2px lightblue solid;
         border-collapse: collapse;
         font-weight: bold;
      }

      table.left {
         height: 600px;
         box-sizing: border-box;
      }

      table.center {
         height: 600px;
         box-sizing: border-box;
      }

      table.right {
         height: 600px;
         box-sizing: border-box;
      }

      div.left {
         float: left;
         width: 33.33%;

      }

      div.center {
         float: left;
         width: 33.33%;

      }

      div.right {
         float: right;
         width: 33.33%;

      }

      table.bottom,
      td.bottom,
      th.bottom {
         border: 2px lightsalmon solid;
         border-collapse: collapse;
         font-weight: bold;
      }

      table.bottom {
         height: 600px;
         box-sizing: border-box;
      }

      div#background {
         background-color: blue;

      }

      .mstj {
         background-color: yellowgreen;
         text-align: center;
         clear: both;
      }
</style>
</head>

<body>
<h1 class="title"><img src="飞机.png" alt="飞机"> 小陈与小林的泉州之旅 <img src="轮船.png" alt="轮船"></h1>
<div class="background" id="background">
      
      <div class="left">
         <table class="left">
            <tr>
                  <td class="left" colspan="3"> 第一天：10月1日</td>
            </tr>
            <tr>
                  <td class="left" colspan="3">民宿：泉州悦城公寓</td>
            </tr>

            <tr>
                  <th class="left">时间</th>
                  <th class="left">行程</th>
                  <th class="left">备注</th>
            </tr>

            <tr>
                  <td class="left">上午</td>
                  <td class="left">民宿</td>
                  <td class="left">先到民宿休息！</td>
            </tr>

            <tr>
                  <td class="left" rowspan="2">下午</td>
                  <td class="left">蟳蜅村</td>
                  <td class="left">值得一逛的海边小村，女性的发饰别具特色，很有烟火气息，有专门的蟳蜅女服饰体验店，还可以拍渔船、用生蚝壳堆砌的墙。</td>
            </tr>

            <tr>
                  <td class="left">东海泰禾</td>
                  <td class="left">日落打卡点：<br>
                     ①丰海路摩天轮下的天桥；<br>
                     ②晋江大桥头（最佳，可以同时看到丰海路+晋江+摩天轮）；
                     ③泰禾广场LeChill，差不多18:20左右到，欣赏一场漂亮的日落！
                  </td class="left">
            </tr>

            <tr>
                  <td class="left" rowspan="2">晚上</td>
                  <td class="left">丰海路</td>
                  <td class="left">不定时出来的车尾咖啡，就在丰海路靠江边一侧，可以吹着江风喝着咖啡；<br>
                     泰禾洲际酒店门口也有车尾集市，潮流年轻人聚集地。</td>
            </tr>

            <tr>
                  <td class="left">泰禾夜市摊</td>
                  <td class="left">差不多下午5点半左右开始出摊，到了晚上非常热闹，看完日落可以来这边觅食，四果汤、福鼎肉片、蚵仔煎、土笋冻等。</td>
            </tr>
         </table>
      </div>

      
      <div class="center">
         <table class="center">
            <tr>
                  <td class="center" colspan="3">第二天：10月2日</td>
            </tr>
            <tr>
                  <td class="center" colspan="3">民宿：皇盛酒店</td>
            </tr>

            <tr>
                  <th class="center">时间</th>
                  <th class="center">行程</th>
                  <th class="center">备注</th>
            </tr>

            <tr>
                  <td class="center" rowspan="2">上午</td>
                  <td class="center">通淮关岳庙</td>
                  <td class="center">泉州香火最旺的地方，距今有1000多年的历史，来这里感受一下泉州人的信仰。<br>
                     白天可以来求签：先上香后三拜九叩礼，禀明自己的信息后掷信杯，直到一正一反后抽签、解签。
                  </td>
            </tr>

            <tr>
                  <td class="center">清净寺</td>
                  <td class="center">阿拉伯穆斯林在我国创建的现有最古老的伊斯兰教寺<br>
                     温馨提示：不允许穿吊带/膝盖以上短裙短裤进寺。
                  </td>
            </tr>

            <tr>
                  <td class="center" rowspan="4">下午</td>
                  <td class="center">中山街、钟楼</td>
                  <td class="center">是我国仅有的、保存最完整的连排式齐楼，穿梭的电瓶车、红砖古厝；中山街的末端是钟楼。</td>
            </tr>

            <tr>
                  <td class="center">开元寺</td>
                  <td class="center">拥有1300年历史，是福建最大的佛教寺院、是申遗成功的22个古迹遗址之一。适合拍照打卡一整面网红墙，阳光好的时候很好出片！

                  </td class="center">
            </tr>

            <tr>
                  <td class="center">西街</td>
                  <td class="center">可以到有鲤天台看日落余晖下的开元寺和人来人往，天台有限制低消噢；买一杯潮茶，有泉州古色古香的感觉；吴氏手工麻糍必打卡，推荐花生的。</td>

            </tr>

            <tr>
                  <td class="center">小西埕</td>
                  <td class="center">进门处有红色许愿牌，可以拍照打卡白岩松的“这是你一生至少要去一次的城市。”</td>
            </tr>

            <tr>
                  <td class="center">晚上</td>
                  <td class="center">西街小酒馆</td>
                  <td>西街的后半段是有很多家小酒馆，营业时间大多在晚上7点-凌晨2点之间，可以随意走进一家酒馆，和朋友惬意地放松聊天，暂别生活的庸扰，感受泉州的慢生活。</td>
            </tr>
         </table>
      </div>

      
      <div class="right">
         <table class="right">
            <tr>
                  <td class="right" colspan="3"> 第三天：10月3日</td>
            </tr>
            <tr>
                  <td class="right" colspan="3">民宿：皇盛酒店</td>
            </tr>

            <tr>
                  <th class="right">时间</th>
                  <th class="right">行程</th>
                  <th class="right">备注</th>
            </tr>

            <tr>
                  <td class="right">上午</td>
                  <td class="right">清源山</td>
                  <td class="right">一定要去老君岩！看到会大为震撼；<br>
                     早上8点前去是不需要门票的，爬山很累，建议坐车！<br>
                     可以在天湖附近找一家点，坐着泡泡茶，吃吃泉州的小吃，俯瞰泉州景色。
                  </td>
            </tr>

            <tr>
                  <td class="right">下午</td>
                  <td class="right">民宿</td>
                  <td class="right">养精蓄锐！</td>
            </tr>

            <tr>
                  <td class="right">晚上</td>
                  <td class="right">动车站</td>
                  <td>小陈与小林的泉州之旅就到此结束啦！我们还要一起去很多很多地方玩呢！来日方长！</td>
            </tr>
         </table>
      </div>
</div>

<div class="bottom">
      <div class="mstj">
         <h1 class="bottom"><img src="冰激凌.png" alt="冰激凌"> 美食推荐 <img src="蛋糕.png" alt="蛋糕"></h1>
      </div>
      <table class="bottom">
         <tr>
            <th class="bottom">美食</th>
            <th class="bottom">地址</th>
            <th class="bottom">推荐理由</th>
         </tr>
         <tr>
            <td class="bottom">忠记盐烧鸡</td>
            <td class="bottom">崇福路</td>
            <td class="bottom">一天卖三百多只盐烧鸡的老店</td>
         </tr>
         <tr>
            <td class="bttom">宋小瑾</td>
            <td class="bottom">东海泰禾</td>
            <td class="bottom">从崇武走出来的本地闽南菜</td>
         </tr>
         <tr>
            <td class="bottom">团结水果店</td>
            <td class="bottom">新华北路</td>
            <td class="bottom">炎炎夏日需要的腌水果</td>
         </tr>
         <tr>
            <td class="bottom">紫燕鸡排</td>
            <td class="bottom">花巷</td>
            <td class="bottom">老字号店！腌制入味有特色</td>
         </tr>
         <tr>
            <td class="bottom">专点煎包</td>
            <td class="bottom">西街</td>
            <td class="bottom">皮薄馅多，类似于剪小笼包</td>
         </tr>
         <tr>
            <td class="bottom">好成财牛排店</td>
            <td class="bottom">涂门街</td>
            <td class="bottom">央视推荐的闽南特色牛排</td>
         </tr>
         <tr>
            <td class="bottom">建来发饭店</td>
            <td class="bottom">南俊北路</td>
            <td class="bottom">当地人才知道的热门老字号餐厅</td>
         </tr>
         <tr>
            <td class="bottom">老兵饭店</td>
            <td class="bottom">美食街</td>
            <td class="bottom">当地人爱吃的大排档，海鲜平价</td>

         </tr>

         <tr>
            <td class="bottom">桥仔头炸醋肉</td>
            <td class="bottom">温岭南路</td>
            <td class="bottom">泉州最好吃的炸醋肉</td>
         </tr>
      </table>

</div>
</body>

</html>

请教一下各位大神，为什么div#background { background-color: blue;}没有效果！

最佳答案

月排行榜 / 总排行榜

sj185123

2022-12-16 11:15:20

没有背景颜色原因：div#background没有尺寸，高度为0
尺寸为0原因：div.left div.center div.right 设置了float，脱离了文档流，所以父模块div#background没有尺寸
解决方案：1.继续使用float，测量好模块高度，给div#background设置高度

div#background {
            background-color: blue;
            height: 609px;
        }

2.不用float，设置div.left div.center div.right三个模块为行内块元素

        div.left {
            display: inline-block;
            width: 33%;            
        }

        div.center {
            display: inline-block;
            width: 33%;
        }

        div.right {
            display: inline-block;
            width: 33%;
        }

亲测可以解决问题
解决方法可能不止这两种，我目前只想到这两种

跳转到最佳答案楼层

ba21 · 发表于 2022-9-30 22:33:40

div#background {
         background-color: blue;

      }
该div你没有指定大小，所以它相当于没有。指定大小即可

sj185123 · 发表于 2022-12-16 11:15:20

这个最佳答案由 sj185123 给出，感谢 sj185123 的回答。

单击隐藏图章

没有背景颜色原因：div#background没有尺寸，高度为0
尺寸为0原因：div.left div.center div.right 设置了float，脱离了文档流，所以父模块div#background没有尺寸
解决方案：1.继续使用float，测量好模块高度，给div#background设置高度

div#background {
            background-color: blue;
            height: 609px;
        }

2.不用float，设置div.left div.center div.right三个模块为行内块元素

        div.left {
            display: inline-block;
            width: 33%;            
        }

        div.center {
            display: inline-block;
            width: 33%;
        }

        div.right {
            display: inline-block;
            width: 33%;
        }

亲测可以解决问题
解决方法可能不止这两种，我目前只想到这两种

账号		自动登录	找回密码
密码			立即注册