html - 简单的 CSS 编辑

标签 html css

我有一个简单的查询,但我无法理解。我将一张图片放入我的“导航”div 中,它包含一个红白框。我在我的内容所在的“导航”div 之后创建了一个“内容”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;

}

最佳答案

#content 上添加以下属性:

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

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

关于html - 简单的 CSS 编辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16847421/

相关文章:

html - 如何让 Bootstrap3 缩略图中的内容一直流到边缘?

CSS 游标属性不起作用

javascript - 允许在 url 末尾为 javascript 条件 css 样式使用通配符

jQuery 从所有元素中删除样式属性

javascript - 使用 jquery 突出显示区域元素

html - 使按钮、选择和输入都具有相同的高度

html - 无法正确居中 div

css - 如何更改 matinput 占位符的颜色?

c# - 发送表格彼此相邻的 outlook 电子邮件

css - Cloudfront 为 Rails 3.2 应用程序提供陈旧的 CSS