使用CSS堆叠div [英] Stacking Divs with CSS

问题描述

我有一个新的CSS一直使用表为我的html多年来，我试图找出如何可以嵌套div或堆叠在3列布局的内容部分。与表我只是做一个新的< tr>
，但如果我浮动另一个div到内容行线，它将出现平行或垂直，当我想出现在下面。有没有其他方法可以做到这一点，或者我错过了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?

基本示例代码

        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>

推荐答案

c> #content div ...嵌套将强制他们保持在他们的父代...（不要浮动这些内 div，其他..）

You can just add divs inside the #content div... the nesting will force them to stay inside their parent ... (do not float those inner divs, to make them go one beneath the other..)

这篇关于使用CSS堆叠div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！