Question

我有一个简单的查询，我无法理解。我有一个图像放入我的'nav'div，它包含一个红色＆amp;白盒子。我已经在'nav'div之后创建了一个'content'div，我的内容将会去，但它与前一个div中的图像长度不匹配。请参阅this link以获得更清晰的图片。

<body>
<div id="wrap">

    <div id="header">
        <!-- LOGO GOES HERE -->
    </div>

    <div id="nav">
        <img src="images/nav.png" width="1076" height="99" />
    </div>

    <div id="content">
        HOW DO I ALIGN THIS DIV TO MATCH THE LENGTH OF THE WHITE BOX ABOVE?
    </div>

</div><!--End of wrap -->

    body {
    background-color:#d3d1d1;
    margin:0 auto;
}

#wrap {
    width:1076px;
    margin:auto;
}

#content {
    background-color:white;

}

Answer 1

将以下规则放在#content上：

margin: 0 25px 0 22px;

虽然你的图像在右边有一个锯齿状的柔软边缘，但它仍然看起来很难看。您可以使用边框补偿：

#content {
    margin: 0 25px 0 22px;
    border-right: 1px solid #eee;
}

Answer 2

在#content上添加以下属性：

width: 1029px (I find it looks better than 1028px, but you can try both)
margin-left: 22px

这会使#content框与图像的空白区域大小相同，并且会对齐它们，使它们都从左侧的同一点开始。

Answer 3

最好的主意 - 从图像中删除空白区域，然后将整个内容变为白色。使用margin：0 auto;

添加上边距，左，右和中心内容

Answer 4

您的图片似乎并未真正居中。折叠的小位不均匀。所以，这是第一个可能引起我的回答的问题。

#content {
  margin: 0 auto; /* this centers the div | 0 margin top/bottom auto on sides */
  width: 100%;
  max-width: 1030px; /* this needs to be the exact width of your white thing in photoshop */
}

这就是简单的答案......但是......它要求你的photoshop图像对称。

Answer 5

将您的#content css更改为：

#content {
  background-color: white;
  margin-left: 22px;
  width: 1028px;
}

这是如何工作的：边距设置为对齐内容框的左侧。然后增加宽度，直到它与图像中的白色框匹配。

修改删除了评论中指出的不必要的左侧定位

简单的CSS编辑

5 个答案: