构建我想要的简单HTML布局的最佳方法

Question

下图显示了我希望完成的简单结构。我遇到的问题是我想知道构建第二行的最佳方法是什么 - 我希望背景颜色跨越页面的整个宽度，但我想将此行拆分为两列，这两列位于文档的中心，并且在您调整网页大小时将保留在中心。我怎么能这样做？

我假设我可以在图像上加上边距顶部。

这是我迄今为止的尝试：

<div id="wrapper">
        <div id="logo">
            <img src="webpageLogo.png" alt="imageOfLogo" width="125" height="125"/>
        </div>
        <div id="twoCol">
            <div id="left">
                <p>TextBox Here.</p>
            </div>
            <div id="right"> 
                <img src="images/laptop.png" alt="An image of a laptop" />
            </div>
        </div>
        <div id="content">

</div>

CSS：

#wrapper
{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

#twoCol
{
    height : 400px; 
    text-align: center;
    background: red;
}

#left
{
    float:left;
    text-align:right;
}

#right
 {
     float:right;
     text-align:left;
}

#twoCol{
    margin-left:auto;
    margin-right:auto;
  }

但是，这里的第二行没有按照我的意愿显示，也没有为我调整大小。我怎样才能解决这个问题 ？

Answer 1

我建议你看看使用像bootstrap网格这样的网格系统。

它可以让你的生活变得如此简单，以便完成你想要做的事情，而且它可以调整大小甚至适应移动设备......

花10到15分钟了解如何使用它，它可以节省数小时后试图破解css代码以使其正常工作。

http://webdesign.tutsplus.com/tutorials/complete-websites/twitter-bootstrap-101-the-grid/

http://www.revillwebdesign.com/twitter-bootstrap-tutorial/

Answer 2

自从Bootstrap之前我一直在构建这样的东西，所以我亲自手工制作它。我会这样做：

http://jsfiddle.net/SAYtS/

不是将整个页面包装在包含div中，而是单独执行每个页面部分，然后在每个页面部分中添加一个公共.page div，以在整个文档中一致地设置宽度和中心对齐。然后，您可以display:inline-block获取两列。你也可以浮动两个div但你可能最终需要使用clearfloat（http://www.webtoolkit.info/css-clearfix.html）修复来防止包装器div崩溃。