0

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

我想我可以在图像上放置一个margin-top。

图片显示了一个有 3 行的文档，第一个很简单，第二个被分成两列，从中间分开。 左边的列有一个指向第三行的箭头。

到目前为止，这是我的尝试：

<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;
  }

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

4

2 回答 2

0

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

它以多种方式使生活变得如此轻松，可以完全按照您的意愿去做，而且它可以调整大小甚至适应移动设备。.

花 10 到 15 分钟来了解如何使用它，它可以在之后尝试破解 css 代码以使事情正常运行时节省数小时。

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

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

于 2013-05-17T00:16:47.647 回答
0

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

http://jsfiddle.net/SAYtS/

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

于 2013-05-17T00:25:13.593 回答