如何让我的 div 在父容器中的另一个 div 旁边？

Question

上面两张图你可以看到我是主容器，里面装了3个小的divs，中间一个大的，两边两个瘦的，但是右边直到在中间下方 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;

}
```

Answer 1

应该这样做：

.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 只有现代浏览器）：

演示 https://jsfiddle.net/nanilab/1e68uv6y/

如何让我的 div 在父容器中的另一个 div 旁边？

how do i get my div next to the other div in the parent container?

html

css

parent