鱼C论坛

 找回密码
 立即注册
查看: 939|回复: 2

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

[复制链接]
发表于 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;}没有效果!
最佳答案
2022-12-16 11:15:20
没有背景颜色原因:div#background没有尺寸,高度为0
尺寸为0原因:div.left div.center div.right 设置了float,脱离了文档流,所以父模块div#background没有尺寸
解决方案:1.继续使用float,测量好模块高度,给div#background设置高度
  1. div#background {
  2.             background-color: blue;
  3.             height: 609px;
  4.         }
复制代码

                2.不用float,设置div.left div.center div.right三个模块为行内块元素
  1.         div.left {
  2.             display: inline-block;
  3.             width: 33%;            
  4.         }

  5.         div.center {
  6.             display: inline-block;
  7.             width: 33%;
  8.         }

  9.         div.right {
  10.             display: inline-block;
  11.             width: 33%;
  12.         }
复制代码

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

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-9-30 22:33:40 | 显示全部楼层
div#background {
            background-color: blue;
            
        }
该div你没有指定大小,所以它相当于没有。指定大小即可
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2022-12-16 11:15:20 | 显示全部楼层    本楼为最佳答案   
没有背景颜色原因:div#background没有尺寸,高度为0
尺寸为0原因:div.left div.center div.right 设置了float,脱离了文档流,所以父模块div#background没有尺寸
解决方案:1.继续使用float,测量好模块高度,给div#background设置高度
  1. div#background {
  2.             background-color: blue;
  3.             height: 609px;
  4.         }
复制代码

                2.不用float,设置div.left div.center div.right三个模块为行内块元素
  1.         div.left {
  2.             display: inline-block;
  3.             width: 33%;            
  4.         }

  5.         div.center {
  6.             display: inline-block;
  7.             width: 33%;
  8.         }

  9.         div.right {
  10.             display: inline-block;
  11.             width: 33%;
  12.         }
复制代码

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

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-28 19:14

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表