在上面的两张图片中你可以看到我有一个主容器，里面装满了 3 个较小的 div，一个大的在中间，两个瘦的在两边，但是右边直到中间的 div 下面才开始。
我怎样才能让这个正确的顶部与容器中的其他顶部对齐？
```
<!DOCTYPE html>
<html>
<head>
<title>Make money from cell phones</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
<link href='https://fonts.googleapis.com/css?family=Adamina|Alegreya+SC'
rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>Website title!</h1>
<nav>
<ul>
<li>Buying Tips</li>
<li>Selling Tips</li>
<li>option 3</li>
<li>option 4</li>
<li>option 5</li>
</ul>
</nav>
</header>
<div class="home-container">
<div class="home-left">
<p>fdfdf</p>
</div>
<div class="home-main">
<h3>Welcome to the website</h3>
<p>General purpose of the website and general information about website contents....
General purpose of the website and general information about website contents....
General purpose of the website and general information about website contents....
General purpose of the website and general information about website contents....
General purpose of the website and general information about website contents....
</p>
</div>
<div class="home-right">
<p>dfdfdfd</p>
</div>
</div> <!-- CONTAINER END DIV -->
</body
</html>
```
```
body {
background-color:#AAAACC;
font-family: adamina;
}
header {
background: red; /* For browsers that do not support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(35deg,#82d5f0 12%, #6BCDED,#43E8B1,blue,#5E50DE,#25055C,#1B4C5C );
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(35deg,#82d5f0 12%, #6BCDED,#43E8B1,blue,#5E50DE,#25055C,#1B4C5C );
/* For Fx 3.6 to 15 */
background: -moz-linear-gradient(35deg,#82d5f0 12%, #6BCDED,#43E8B1,blue,#5E50DE,#25055C,#1B4C5C ) ;
/* Standard syntax */
background: linear-gradient(35deg,#82d5f0 16%,#6BCDED, #25055C, #43E8B1,#db4dff,#5E50DE,#800040,#1B4C5C );
width:100%;
height: 145px;
border-bottom: 4px solid black;
border-top: 4px solid black;
}
h1 {
width:30%;
float:left;
font-size: 3.75rem;
margin-left: 6%;
margin-top: 35px;
}
header nav ul {
position: relative;
top:25px;
left:0px;
float: right;
margin-right: 22.5px;
list-style: none;
}
header nav ul li {
display:inline-block;
padding: 15px 18px;
border: 3px solid black;
border-radius: 12.5%;
background: linear-gradient(125deg,#82d5f0 12%, #6BCDED,#43E8B1,blue,#5E50DE,#25055C,#1B4C5C );
opacity: 0.8;
}
.home-container {
width: 100%;
display: block;
line-height: 1.5;
height: 900px;
}
.home-main {
margin:16px auto 0;
width:65%;
background-image: url('img/skyspace.png');
background-size: cover;
color: #CCCCFF;
height: inherit;
}
.home-main h3 {
font-size: 50px;
font-weight: 1000;
}
.home-main p {
font-size: 26px;
font-weight: bold;
}
.home-left {
float: left;
width: 10%;
margin: 0 2.5%;
background-color:white;
height:inherit;
}
.home-right {
position: relative;
float: right;
width: 10%;
margin: 0 2.5%;
height: inherit;
background-color:white;
}
```
最佳答案
应该这样做:
.column-left { float: left; width: 10%; }
.column-right { float: right; width: 10%; }
.column-center { display: inline-block; width: 80%; }
演示 https://jsfiddle.net/nanilab/hms51o6z/
编辑
您还可以使用 flexible boxes (supported 仅适用于现代浏览器):
关于html - 如何让我的 div 与父容器中的另一个 div 相邻？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37095704/