Question

我一直试图让我的3个盒子完全适合我的旗帜但是出于某种原因，当我设置所有和10px填充的宽度时，它会在其他两个下面丢掉其中一个......我不是明白为什么，但如果你能看看，让我知道，谢谢。我希望它完全位于中心，并且优先使用横幅。

<!DOCTYPE html>
<html>
<head>

  <title>site</title>

  <meta name="description" content="" />

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <link rel="stylesheet" href="styles.css" />
  <link href='https://fonts.googleapis.com/css?family=Libre+Franklin' rel='stylesheet' type='text/css'>
  <script src="js/jquery.min.js"></script>
  <!--[if lt IE 8]>
  <![endif]-->

</head>
<body>
    <div id="header">
        <nav>
        <ul>
            <li><a href="">Contact</a></li>
            <li class="nav-sep">|</li>
            <li><a href="">Portfolio</a></li>
            <li class="nav-sep">|</li>
            <li><a href="">Blog</a></li>
            <li class="nav-sep">|</li>
            <li><a href="">About</a></li>
            <li class="nav-sep">|</li>
            <li><a href="">Home</a></li>
        </ul>

        </nav>
        <div id="banner"></div>
    </div>

    <div id="content-container">
    <div class="content-box"></div>
        <div class="content-box"></div>
    <div class="content-box"></div>
    </div>

</body>
</html>

body {
    background: #f9f9fb;
    margin: 0px;
    padding: 0px;
}

nav {
    width: 1530px;
    height: 60px;       
    margin: auto;
}

nav ul {
    list-style-type: none;
    margin: auto -20px auto auto;
}

nav li {
    display: inline-block;
    line-height: 60px;
    float: right;
}

nav a {
    text-decoration: none;
    color: #f9f9fb;
    font-family: 'verdana', sans-serif;
    padding: 0 20px;
    font-size: 0.85em;
    display: block;


}

nav a:hover {
    color: #f9f9fb;
    transition: color 0.8s ease;

}


#header {
    width: 100%;
    height: 340px;
    background-color: #212429;
}

#banner {
    width: 1530px;
    height: 579px;
    background: url('banner.png');
    margin: auto;

}

li.nav-sep {
        color: #313642;
}

.content-box {
    width: 496px;
    height: 496px;
    background-color: red;
    float: right;
    margin: 8px;


}

#content-container {
    max-width: 1530px;
    margin: 320px auto auto auto;

}

Answer 1

每盒的重量为496像素。它们在左侧和右侧各有8px的边距。

（496 + 8 + 8）* 3 = 1536

所以容器需要1536像素或更宽才能容纳它们。

将content-container的宽度更改为1536：

#content-container {
    max-width: 1536px;
    margin: 320px auto auto auto;
}

Answer 2

试

#content-container {
    display:inline-flex;
    max-width: 1530px;
    margin: 320px auto auto auto;

}

让我知道

Answer 3

要对齐所有框，您必须进行以下更改：

.content-box {
    width: 32.2%;
    height: 496px;
    background-color: red;
    float: left;
    margin: 8px;


}

#content-container {
    max-width: 1530px;
    margin: 320px auto;

}

看一下容器的宽度。如果将其分成三半，则每个内容框必须小于该数字。并且总是更好地使用宽度百分比，以便它在不同的屏幕尺寸上运行良好。

Answer 4

从.content-box类中删除float：并将其添加到#content-container：

#content-container {
  max-width: 1536px;
  margin-top: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

Answer 5

您好，欢迎来到Stack Overflow - 根据您的问题，有两个主要案例：

content-container的宽度= 1530px，在这种情况下，框的宽度为499.99px


左边8px边框=最右边8 * 3 = 24px + 8px间隙= 32px
     所有方框都剩下1530 - 32 = 1498px
     每个方框
1498/3 = 499.99 px
这些框的宽度为496px，在这种情况下，内容容器的宽度为1520px


左边8px边框=最右边8 * 3 = 24px + 8px间隙= 32px

496 * 3 = 1488px

1488 + 32 = 1520px for content-container

您还需要为内容容器指定一个实际宽度并向左浮动框

#content-container {
    width: 1530px;
    margin: 320px auto auto auto;
} 
.content-box {
    width: 499px;
    height: 496px;
    background-color: red;
    float: left;
    margin-left: 8px;
}

您还可以使用百分比来简化生活和响应

Check out a similar question here

祝你好运：）

如果没有它们互相推动，我将如何对齐盒子？

5 个答案: