Question

我有一个包含2个div的div容器：banner和content。横幅和内容都将css属性宽度设置为100％，但在渲染时它们是不同的。

这是我的index.html

<!doctype html>
<html lang="en">
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet"/>
    <title>JoeY34kaze's gw2 stuff</title>
<body>
    <div id="container">
        <header>
            <h1>
                This is my header.
            </h1>
        </header>
        <div id="banner">
            <h2>
                This is the banner.
            </h2>
        </div>
        <div id="content">
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
        </div>
    </div>

</body>
</html>

这是我的style.css

    body {
    text-align:center;
}


header {
    width:100%;
    height:100px;
    background: #dbdbdb;
    z-index:10;
    position: fixed;
}

#container {
    overflow:hidden;
    min-width:100%;
    padding:0;
}

#banner {
    width:100%;
    height: 500px;
    padding:0;
    position: fixed;
    top: 100px;
    background-color:#707070;
}

#content {
    height:100%;
    width:100%;
    position: relative;
    top:400px;
    background-color: #ebebeb;
}

，页面如下所示：

website

在我解决此问题之前，该页面也在此处https://gw2stuff.herokuapp.com/

问题是在右侧2个div没有对齐，但它们应该是对齐的。我认为问题来自内容div的相对位置，但我无法解决它，所以我的问题是如何对齐2个div以使它们的宽度匹配？

Answer 1

删除margin

上的默认body

body {
margin:0;
}

#content div会受到该边距的影响，但固定位置元素虽然它们已放置与该边距相关，因为您尚未声明left:0位置对他们来说。

这应该自动包含在任何CSS重置中。

Answer 2

将margin: 0添加到内容，如果这不起作用，请稍微移动内容，也许left: 5px可以正常工作

Answer 3

将$('td').addClass('hide');的位置更改为：

content

css div在它们不应该有不同的宽度

3 个答案: