0

我有一个简单的查询，我无法理解。我有一张图片放入我的“导航”div 中，它包含一个红色和白色的框。我在 'nav' div 之后创建了一个 'content' div，我的内容将放在其中，但它与前一个 div 中图像的长度不匹配。请查看此链接以获得更清晰的图片。

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

}
4

5 回答 5

1

添加#content以下属性：

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

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

于 2013-05-30T23:29:25.343 回答
1

将以下规则放在#content：

margin: 0 25px 0 22px;

它仍然看起来很丑，因为您的图像右侧有锯齿状的软边缘。您可以使用边框来弥补这一点：

#content {
    margin: 0 25px 0 22px;
    border-right: 1px solid #eee;
}
于 2013-05-30T23:22:59.527 回答
0

最好的主意-从图像中删除空白，然后使整个东西变白。使用 margin: 0 auto 添加上边距、左、右和居中内容；

于 2013-05-30T23:30:33.323 回答
0

看来您的图像并没有真正居中。折叠的小部分不均匀。所以，这是第一个让我无法回答的问题。

#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 图像对称。

于 2013-05-30T23:45:44.197 回答
-1

将您的#content css 更改为：

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

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

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

于 2013-05-30T23:22:40.570 回答