我试过设置我的标题(包含 2 个 div)
position: relative;
和 header 内的两个 div
position: absolute;
bottom: 0;
但我希望紫色 #menu_bar 和蓝色 #sub_menu_bar div float 在红色 #header div 的底部。
我怎样才能做到这一点？
#html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
display: flex;
}
#menu_container {
display: block;
background: rgba(42, 42, 42, 0.496);
width: 250px;
height: 100%;
}
#main_container {
background: rgba(0, 0, 0, 0.526);
display: block;
height: 100%;
margin-left: auto;
padding-left: 20px;
padding-right: 20px;
flex: 1;
}
#header {
background: rgba(255, 0, 0, 0.526);
height: 120px;
margin-left: -20px;
margin-right: -20px;
}
#menu_bar {
background: rgba(9, 20, 164, 0.487);
display: block;
height: 35px;
}
#sub_menu_bar {
background: rgba(15, 230, 255, 0.539);
display: block;
height: 35px;
}
#contents {
background: pink;
height: 600px;
margin-top: 20px;
}
#recent_topics {
background: green;
height: 300px;
margin-top: 20px;
}
#stats {
background: orange;
height: 300px;
margin-top: 20px;
margin-bottom: 20px;
}<body>
<div id="menu_container"></div>
<div id="main_container">
<div id="header">
<div id="menu_bar"></div>
<div id="sub_menu_bar"></div>
</div>
<div id="contents"></div>
<div id="recent_topics"></div>
<div id="stats"></div>
</div>
</body>最佳答案
只需在页眉中添加另一个 div 并为其指定高度即可。
允许更少的 CSS，并有助于在语义上分离头部内部的内容。
您还应该使用更多语义 html 标签，例如 <header></header>代替 <div id="header"></div>
您甚至不需要为 <div id="header_content"> 添加高度如果您希望它是其内容的高度。
#html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
display: flex;
}
#menu_container {
display: block;
background: rgba(42, 42, 42, 0.496);
width: 250px;
height: 100%;
}
#main_container {
background: rgba(0, 0, 0, 0.526);
display: block;
height: 100%;
margin-left: auto;
padding-left: 20px;
padding-right: 20px;
flex: 1;
}
#header {
background: rgba(255, 0, 0, 0.526);
margin-left: -20px;
margin-right: -20px;
position: relative;
}
#header_content{
height: 50px;
}
#menu_bar {
background: rgba(9, 20, 164, 0.487);
display: block;
height: 35px;
}
#sub_menu_bar {
background: rgba(15, 230, 255, 0.539);
display: block;
height: 35px;
}
#contents {
background: pink;
height: 600px;
margin-top: 20px;
}
#recent_topics {
background: green;
height: 300px;
margin-top: 20px;
}
#stats {
background: orange;
height: 300px;
margin-top: 20px;
margin-bottom: 20px;
}<body>
<div id="menu_container"></div>
<div id="main_container">
<div id="header">
<div id="header_content"></div>
<div id="menu_bar"></div>
<div id="sub_menu_bar"></div>
</div>
<div id="contents"></div>
<div id="recent_topics"></div>
<div id="stats"></div>
</div>
</body>关于html - 如何在一个div的底部 float 2个div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38663720/