Question

在上面的两张图片中，你可以看到我有一个主容器，里面装满了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;

}
```

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？

1 个答案: