HTML Div不会留在它之上的Div

时间：2017-11-20 23:41:01

标签： html css

我正在尝试创建两个像两行一样的div;一个在另一个的顶部跨越屏幕的宽度。每行包含一个图像和一个标题。 Mybe是一个片段而不是小提琴会有所帮助。这是“好”的布局：

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 个答案:

答案 0 :(得分：1)

1。）你需要将元素漂浮在 .float-left内，而不是.float-left本身，所以添加：

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

2。）并且您的.menu规则设置为max-width，可以防止它超过150px。擦掉那个。

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>

相关问题
最新问题