个人中心
gpt4 book ai didi

HTML Div 不会停留在其上方的 Div 之下

转载 作者：太空宇宙 更新时间：2023-11-04 07:55:04 25 4
gpt4 key购买 nike

我正在尝试创建两个像两行一样的 div；一个在另一个之上，跨越屏幕的宽度。每行包含一个图像和一个标题。 Mybe 一个片段而不是一个 fiddle 会有所帮助。这是“好的”布局:

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

header, footer, hgroup,
nav, section {
    display: block;
}

.float-left > * {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }


/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 100%;  /*960px;*/
}

#body {
    background-color: #efeeef;
    clear: both;
    padding-bottom: 35px;
}

    .main-content {
        padding-left: 10px;
        padding-top: 30px;
    }

header {
}

    .main-row {
        min-height: 85px;
        background: linear-gradient(#d2d2d9, #efeeef, white);
    }

    .menu-row {
        min-height: 50px;
        background-color: #2983be;
    }

    .menu {
        min-height: 50px;
        max-width: 300px;
        background-color: #a5fa06;
        opacity: 0.9;
    }

    .content-wrapper {
        padding-top: 10px; 
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
}
<body>
    <header>
        <div class="main-row">
            <div class="content-wrapper">
                <div class="float-left">
                    <img class="icon" style="float: left; " src="//placehold.it/50x80" alt="logo image" />
                    <label style="float: left; font-size: large; "><h1>My system</h1></label>
                </div>
            </div>
        </div>
        <div class="menu-row">
            <div>
                <div class="menu">
                    <label style="font-size: medium; "><h2>Home</h2></label>
                </div>
            </div>
        </div>
    </header>
</body>

但是，当我包含 float-left 时，底部的 div 会向上移动。查看Fiddle of "Good" layout here当我尝试使用 float-left 添加图像时，请参阅 "Moved" layout here .如您所见，底部 div 向上移动，Home 标题显示在底部 div 下方。

我在此处插入代码片段以显示 div 的移动方式:

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

header, footer, hgroup,
nav, section {
    display: block;
}

.float-left > * {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }


/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 100%;  /*960px;*/
}

#body {
    background-color: #efeeef;
    clear: both;
    padding-bottom: 35px;
}

    .main-content {
        padding-left: 10px;
        padding-top: 30px;
    }

header {
}

    .main-row {
        min-height: 85px;
        background: linear-gradient(#d2d2d9, #efeeef, white);
    }

    .menu-row {
        min-height: 50px;
        background-color: #2983be;
    }

    .menu {
        min-height: 50px;
        max-width: 300px;
        background-color: #a5fa06;
        opacity: 0.9;
    }

    .content-wrapper {
        padding-top: 10px; 
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
}
<body>
    <header>
        <div class="main-row">
            <div class="content-wrapper">
                <div class="float-left">
                    <img class="icon" style="float: left; " src="//placehold.it/50x80" alt="logo image" />
                    <label style="float: left; font-size: large; "><h1>My system</h1></label>
                </div>
            </div>
        </div>
        <div class="menu-row">
            <div>
                <div class="menu">
                    <div class="float-left">
                    <div style="width: 50px height: 50px;">
                        <img class="icon" style="float: left; width: 50%; height: 50%; " src="//placehold.it/50x50" alt="home icon" />
                    </div>
                    <label style="float: left; font-size: medium; "><h2>Home</h2></label>
                    </div>
                </div>
            </div>
        </div>
    </header>
</body>

这就是我要实现的目标:

enter image description here

如何让底部的 div 保持在第一个 div 之下？

最佳答案

1.) 您需要在 .float-left 中 float 元素，而不是 .float-left 本身，因此添加: 

.float-left > * {
  float: left;
}

2.) 并且您的 .menu 规则具有 max-width 设置，可防止其宽度超过 150 像素。删除那个。

https://jsfiddle.net/v3vo37v7/2/

这也是一个片段，另外我将标题中 h1 和 h2 的边距重置为 0 以避免它们的默认垂直偏移:

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

header, footer, hgroup,
nav, section {
    display: block;
}

.float-left * {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }


/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 100%;  /*960px;*/
}

#body {
    background-color: #efeeef;
    clear: both;
    padding-bottom: 35px;
}

    .main-content {
        padding-left: 10px;
        padding-top: 30px;
    }

header {
}

    .main-row {
        min-height: 85px;
        background: linear-gradient(#d2d2d9, #efeeef, white);
    }

    .menu-row {
        min-height: 50px;
        background-color: #2983be;
    }

    .menu {
        min-height: 50px;
        background-color: #a5fa06;
        opacity: 0.9;
    }

    .content-wrapper {
        padding-top: 10px; 
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
}
header h1, header h2 {
  margin: 0;
}
<body>
    <header>
        <div class="main-row">
            <div class="content-wrapper">
                <div class="float-left">
                    <img class="icon" style="float: left; " src="https://drive.google.com/file/d/13U6WdvWQhfUF_8qJ8BLKJpLQCPtNgMKZ/view?usp=sharing" alt="logo image" />
                    <label style="float: left; font-size: large; "><h1>My system</h1></label>
                </div>
            </div>
        </div>
        <div class="menu-row">
            <div>
                <div class="menu">
                    <div class="float-left">
                        <img class="icon" style="float: left; width: 50%; height: 50%; " src="https://drive.google.com/file/d/1NAbtOJAariTJatGCcBEY48sR_gyKGMb-/view?usp=sharing" alt="home icon" />
                        <label style="float: left; font-size: medium; "><h2>Home</h2></label>
                    </div>
                </div>
            </div>
        </div>
    </header>
</body>

关于HTML Div 不会停留在其上方的 Div 之下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47402943/

25 4 0
文章推荐： c - 树莓派上的结构段错误gcc
文章推荐： c - 区分嵌入式 NUL 和 NUL 终止符
文章推荐： c - 包含特殊字符的有效标识符 - C 编程
文章推荐： html - 在 Codeigniter 中单击按钮时从数据库添加卡片元素
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com