使用 CSS 堆叠 Div
我对 CSS 有点陌生，多年来一直在我的 html 中使用表格，我试图弄清楚如何嵌套 div 或将它们堆叠在 3 列布局的内容部分中。对于表格，我只需执行一个新的 但是如果我将另一个 div 浮动到内容行中，当我想出现在下面时，它会显示为平行或垂直。还有另一种方法可以做到这一点还是我错过了 Divs 的要点？
基本示例代码
body {
margin: 0px;
padding: 0px;
}
#header {
background: #438a48;
width: 100%;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 25%;
height: 700px;
}
#content {
background: #000;
float: left;
width: 75%;
height: 700px;
}
#footer {
background: #df781c;
clear: both;
width: 100%;
}
HTML
<div id="header">Header</div>
<div id="leftcolumn">Left Column</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
Im kinda new to CSS have been using tables for my html for years, Im trying to figure out how I can nest divs or stack them inside the content section of a 3 column layout. with tables I'd just do a new <tr>
but if I float another div into the content line line it will appear parallel or vertically, when I want to appear beneath. is there another way to do this or am I missing the point of Divs here?
basic example code
body {
margin: 0px;
padding: 0px;
}
#header {
background: #438a48;
width: 100%;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 25%;
height: 700px;
}
#content {
background: #000;
float: left;
width: 75%;
height: 700px;
}
#footer {
background: #df781c;
clear: both;
width: 100%;
}
The HTML
<div id="header">Header</div>
<div id="leftcolumn">Left Column</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您只需在
#contentdiv 中添加 div...嵌套将迫使它们留在其父级中...（不要浮动那些内部 div，以使他们一个接一个地往下走……）You can just add divs inside the
#contentdiv... the nesting will force them to stay inside their parent ... (do not float those inner divs, to make them go one beneath the other..)