带有 Div 标签/ float 的 CSS 通用格式

Question

我是 CSS 的新手，有一个比较笼统的问题，但有一个特定的目的。

这是有问题的网页:http://www.lymemd.org/indexmm6.php

我有几个 DIV:#BannerArea、#BannerinLeft 和#BannerinRight，所有这些都格式化了绿色方 block 中的所有内容。我想把所有东西分开，所以是这样的:

如果有人能帮助我指出正确的方向，告诉我需要做哪些标签以及需要删除哪些标签，我将不胜感激。我已经尝试过很多次让一切都正确，但我总是把事情弄得更糟。

非常感谢。

Answer 1

最简单的方法是制作两列，左边一列包括 Twitter 和最新消息 div，右边一列包括支持我们和 Diane Rehm div。这两列必须 float ，因此请确保它们位于正确宽度的容器中。顶部的 div 很简单。

这是一个 jsfiddle:http://jsfiddle.net/83ngD/7/

基本的 HTML:

<div id="wrapper">
    <div id="topgreen"></div>
    <div id="leftcolumn">
        <div id="twitter"></div>
        <div id="whatsnew"></div>
    </div>
    <div id="rightcolumn">
        <div id="supportus"></div>
        <div id="dianerehm"></div>
    </div>
</div>

基本的 CSS:

#wrapper {
    width: 960px; /*/ example width /*/
    margin: 0 auto; /*/ centers the div /*/
}
#topgreen {
    width: 100%;
    height: 50px; /*/ example height /*/
}
#leftcolumn {
    width: 50%;
    float: left;
}
#rightcolumn {
    width: 50%;
    float: left;
}

现在只需用您想要的内容填充其他 div。上面的代码将为您提供图片中的布局，但非常基础。