我如何在不互相推动的情况下对齐我的盒子？
我如何在不互相推动的情况下对齐我的盒子？
提问于 2016-08-13 06:20:14
我一直试图让我的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;
}回答 5
Stack Overflow用户
发布于 2016-08-13 06:36:07
每个盒子的像素都是496px。它们的左右两侧各有8px的边距。
(496 +8+ 8) *3= 1536
因此，容器需要1536像素或更宽才能容纳所有这些像素。
将content-container的宽度更改为1536
#content-container {
max-width: 1536px;
margin: 320px auto auto auto;
}Stack Overflow用户
发布于 2016-08-13 06:38:14
试一试
#content-container {
display:inline-flex;
max-width: 1530px;
margin: 320px auto auto auto;
}让我知道
Stack Overflow用户
发布于 2016-08-13 06:41:46
要对齐所有框，必须进行以下更改：
.content-box {
width: 32.2%;
height: 496px;
background-color: red;
float: left;
margin: 8px;
}
#content-container {
max-width: 1530px;
margin: 320px auto;
}看看容器的宽度。如果你把它分成三半，你的每个内容框都必须小于这个数字。使用宽度百分比总是更好，这样它在不同的屏幕大小上都能很好地工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38927204
复制相关文章
相似问题
腾讯云开发者
