Fatal编程技术网
  • html/
  • Html CSS间距错误，内容超出了容器

Html CSS间距错误，内容超出了容器

html css

Html CSS间距错误，内容超出了容器,html,css,Html,Css,请容忍我。我不熟悉编码 我正在创建一个网页。它有桌面视图、平板电脑视图和移动视图 在桌面视图中，灰色框应该在同一条线上，它们之间有空格 在tablet视图中，第一行应该有两个灰色框，它们之间有空格，第三个框应该在它自己的行上 在“移动视图”中，每个灰色框都应位于其直线上 我的问题是： 对于桌面视图，如何在框1和框2以及框2和框3之间获得空格 对于桌面视图，当我转到ChromeDeveloper工具并选择部分元素时，灰色框不在容器内。灰色框延伸到容器下方。但是，当我转到tabl

请容忍我。我不熟悉编码

我正在创建一个网页。它有桌面视图、平板电脑视图和移动视图

  • 在桌面视图中，灰色框应该在同一条线上，它们之间有空格

  • 在tablet视图中，第一行应该有两个灰色框，它们之间有空格，第三个框应该在它自己的行上

  • 在“移动视图”中，每个灰色框都应位于其直线上

我的问题是：

  • 对于桌面视图，如何在框1和框2以及框2和框3之间获得空格
  • 对于桌面视图，当我转到ChromeDeveloper工具并选择部分元素时，灰色框不在容器内。灰色框延伸到容器下方。但是，当我转到tablet和mobile view并选择截面元素时，灰色框位于容器内。为什么呢

  • 对于tablet view，如何使前两个框位于第1行，第三个框位于第3行
提前谢谢你！！仅供参考，请参阅下面的代码片段

-伊恩

/*********基本样式*****************/
*{
框大小：边框框；
}
h1{
字体系列：连环画无MS字体、Arial字体、草书字体；
文本对齐：居中；
}
div{
背景颜色：灰色；
}
p{
文本对齐：居中；
边框：1px纯黑；
宽度：100px；
左边距：自动；
位置：相对位置；
顶部：-27px；
右：-11px；
}
部分{
利润率：10px；
}
分区>区段>分区>分区{
填充：10px；
边框：1px纯黑；
}
div>p{
}
#p1{
背景颜色：粉红色；
}
#p2{
背景颜色：栗色；
颜色：白色；
}
#p3{
背景颜色：黄色；
}
/*************仅限桌面设备***********/
@介质（最小宽度：992px）{
.col-lg-3{
浮动：左；
边框：1px纯黑；
填充：10px；
利润率：20px；
}
.col-lg-3{
宽度：25%
}
}
/**********仅限平板电脑设备**************/
@介质（最小宽度：768px）和（最大宽度：991px）{
#第一节{
宽度：45%；
浮动：左；
}
#第2节{
宽度：45%；
浮动：左；
}
#第3节{
浮动：左；
}
}
/************仅限移动设备*************/
@介质（最大宽度：767px）{
col-sm-12{
浮动：左；
边框：1px纯黑；
填充：10px；
利润率：10px；
}
col-sm-12{
宽度：100%；
}
}

我们的菜单
/*********简单响应框架******/
.行{
宽度：100%；
}   
我们的菜单
鸡肉

Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责。
牛肉

Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责。
寿司

Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责。
我将样式设置方法更改为CSS网格

第一：我删除了你的部分的边距：
部分{margin:20px；}

第二：我将所有3个部分都包装在一个div:

第三：我删除了媒体查询中的所有CSS

第四：我在任何媒体查询之外为
div.grid-wrapper
添加了以下CSS:
.grid-wrapper{padding:20px；display:grid；grid-gap:20px；}
。这将为屏幕边框创建一个20px的间距（与previos 20px边距的作用相同）。
网格间隙
将使各部分始终保持20像素的间距，无论在哪个媒体查询视图中

第五：我为桌面视图添加了以下CSS：
.grid wrapper{grid template columns:repeat（3，1fr）；}
。这将把包装分成3个相等宽的列

第六：我为tablet视图添加了以下CSS:
.grid wrapper{grid template columns:repeat（2，1fr）；}.section3{grid column:span 2；}
。这将把包装分成两个相等宽的列。最后第三节将跨越两个柱



    <!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<head>
    <title>Our Menu</title>
    <style>
        
        * {
            box-sizing: border-box;
        }
        
        .col {
            border: 5px solid #fff;
        }
        
        h1 {
            font-family: Comic Sans MS, Arial, cursive;
            text-align: center;
        }

        div {
            background-color: gray;
            width: 100%;

        }

        p {
            text-align: center;
            border: 1px solid black;
            width: 100px;
            margin: auto;
        }


        #p1 {
            background-color: pink;
        }

        #p2 {
            background-color: maroon;
            color: white;
        }

        .row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }

        #p3 {
            background-color: yellow;
        }


        /********** Tablet Devices Only **************/
        @media (min-width: 768px) and (max-width: 1199px) {

            .row {
                grid-template-columns: repeat(2, 1fr);
            }

            #box-3 {

                grid-column: 1 / span 3;

            }
        }


        /************ Mobile Devices Only *************/
        @media (max-width: 767px) {
            .row {
                grid-template-columns: 1fr;
            }
        }

    </style>
</head>

<body>

    <h1>Our Menu</h1>

    <div>

        <section class="container">
            <div class="row">
                <div class="col">

                    <div>
                        <p id="p1">Chicken</p>
                    </div>

                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                </div>

                <div class="col">

                    <div>
                        <p id="p2">Beef</p>
                    </div>

                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                </div>

                <div class="col" id="box-3">

                    <div>
                        <p id="p3">Sushi</p>
                    </div>

                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                </div>


            </div>
        </section>
    </div>


</body>

</html>