css - 构造我想要的简单 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 之前就一直在构建这样的东西，所以我会亲自手动构建它。我会这样做:

http://jsfiddle.net/SAYtS/

与其将整个页面包装在一个包含的 div 中，不如单独处理每个页面部分，然后在每个部分中添加一个通用的 .page div，以在整个文档中一致地设置宽度和居中对齐方式。然后你可以使用 display:inline-block 来获取两列。您也可以 float 两个 div，但您可能最终需要使用 clearfloat ( http://www.webtoolkit.info/css-clearfix.html) 修复来防止包装 div 折叠。