3列布局沒有得到列對齊

Question

我不知道是否很難解釋，但在這裏它去..我在我的網頁上有很多div，我希望他們來一個列布局。該頁面有一個導航欄，一個標誌，一些配置文件數據和3個divs。這3個div沒有正確對齊。我希望他們所有三個#content-1, #content-2, #content-3水平方式在一條直線上。

看到這個fiddle。最好看here的結果。

CSS：

@CHARSET"ISO-8859-1"; 
html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 
#container { 
    width: 100%; 
} 
#content { 
    margin-left: 10%; 
} 
#content-1, #content-2, #content-3 { 
    display: inline-block; 
} 
#content-1 { 
    width: 25%; 
    height: 100%; 
} 
#content-2 { 
    width: 50%; 
    height: 100%; 
} 
#content-3 { 
    width: 20%; 
    height: 100%; 
} 
.user_small_card p.name { 
    font-weight: bold; 
} 
.user_small_card p.profession { 
    margin-top: -10px; 
} 
.userWrap { 
    margin-bottom: 20px; 
} 
.user_card { 
    width: 77% !important; 
    margin-bottom: 10px; 
} 
.major_data { 
    width: 80%; 
} 
.major_data .profile_box p:first-child { 
    border-bottom: 0px; 
    text-align: center; 
    font-size: 20px; 
    background-color: #eee; 
    font-weight: bold; 
} 
.major_data .profile_box p:nth-child(2) { 
    text-align: justify; 
    padding-left: 5px; 
    padding-right: 5px; 
    margin-top: -20px; 
} 
.major_data .profile_box p { 
    border: 1px solid #bbb; 
} 
.commitment_box { 
    text-align: center; 
    height: 390px; 
    overflow: hidden; 
    background-color: lightblue; 
    color: white; 
    font-size: 20px; 
    width: 100%; 
    margin-right: 2%; 
    padding: 5px; 
    overflow-y: scroll; 
} 
.commitment_box .commitment p { 
    display: inline-block; 
    width: 100%; 
} 
.commitment_box .commitment p:first-child { 
    font-weight: bold; 
} 
@CHARSET"ISO-8859-1"; 
.userWrap { 
    position: relative; 
    width: 250px; 
    height: 50px; 
    overflow: visible; 
    z-index: 1; 
} 
.userWrap:hover { 
    z-index: 2; 
} 
.user { 
    position: absolute; 
    display: inline-block; 
    width: 200px; 
    height: 50px; 
    margin-bottom: 5px; 
    background: #fff; 
    transition: width 0.3s, height 0.3s, background-color 1s; 
} 
.user:hover { 
    width: 350px; 
    height: 200px; 
    transition: width 0.3s ease 0.5s, height 0.3s ease 0.5s, background-color 2.3s; 
    background: #eee; 
} 
.user img { 
    float: left; 
} 
.user .name, .skills { 
    margin-left: 5px; 
} 
.user .name { 
    font-size: 21px; 
    font-weight: bold; 
} 
.user_card { 
    background-color: #eee; 
    width: 38%; 
    padding: 10px; 
    display:table; 
} 
.user_card p { 
    display: table-cell; 
    vertical-align:top; 
    line-height:30px; 
    padding:2px 10px 2px 2px; 
    color: #aaa; 
} 
.user_card div { 
    display:table-row; 
    padding:2px; 
} 
.user_card div div { 
    display:table-cell; 
} 
.user_card div div.progress_wrap { 
    background-color: white; 
    width: 100%; 
    border: 1px solid #bbb; 
} 
.user_card div div.progress { 
    height: 30px; 
    background-color: #ddd; 
} 

HTML：

<div id="container"> 
    <div id="content"> 
     <div id="content-1"> 
      <div id="content-1-1"> 
       <div class="user_small_card"> 
        <img src="img/user.png" width="150" height="150" /> 
        <p class="name">Arkam Gadet</p> 
        <p class="profession">Photographer</p> 
       </div> 
      </div> 
      <div id="content-1-2"> 
       <div id="people_worked_with"> 
         <h2>People worked with</h2> 

        <div class="userWrap"> 
         <div class="user"> 
          <img src="img/user.png" width="50" height="50" /> <span class="name">Danish</span> 

          <br/> <span class="skills">Coder, Programmer</span> 

         </div> 
        </div> 
        <div class="userWrap"> 
         <div class="user"> 
          <img src="img/user.png" width="50" height="50" /> <span class="name">Danish</span> 

          <br/> <span class="skills">Coder, Programmer</span> 

         </div> 
        </div> 
        <div class="userWrap"> 
         <div class="user"> 
          <img src="img/user.png" width="50" height="50" /> <span class="name">Danish</span> 

          <br/> <span class="skills">Coder, Programmer</span> 

         </div> 
        </div> 
        <div class="userWrap"> 
         <div class="user"> 
          <img src="img/user.png" width="50" height="50" /> <span class="name">Danish</span> 

          <br/> <span class="skills">Coder, Programmer</span> 

         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div id="content-2"> 
      <div id="content-2-1"> 
       <div class="user_card"> 
        <div class="skills"> 
         <p>Skills</p> 
         <div class="progress_wrap"> 
          <div class="progress" style="width:95%"></div> 
         </div> 
        </div> 
        <div class="commitment"> 
         <p>Commitment</p> 
         <div class="progress_wrap"> 
          <div class="progress" style="width:4%;"></div> 
         </div> 
        </div> 
        <div class="reputation"> 
         <p>Reputation</p> 
         <div class="progress_wrap"> 
          <div class="progress" style="width:5%;"></div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div id="content-2-2"> 
       <div class="major_data"> 
        <div class="profile_box"> 
         <p>About</p> 
         <p>This is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about me</p> 
        </div> 
        <div class="profile_box"> 
         <p>About</p> 
         <p>This is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about me</p> 
        </div> 
        <div class="profile_box"> 
         <p>About</p> 
         <p>This is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about me</p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div id="content-3"> 
      <div id="content-3-1"> 
       <div class="commitment_box"> 
        <div class="commitment"> 
         <p>Alex:</p> 
         <p>Lorizzle ipsum away fo shizzle daahng dawg, consectetizzle adipiscing elit. Nullam sapien velizzle, bow wow wow volutpizzle, crunk gizzle, gravida vizzle, arcu. Dope check it out for sure. Sed erizzle. Gangsta izzle dolor dapibizzle nizzle tempus black. Fo shizzle pellentesque nibh izzle dizzle. Crazy izzle tortizzle.</p> 
        </div> 
        <div class="commitment"> 
         <p>Alex 1:</p> 
         <p>Vivamizzle nec we gonna chung egizzle nisi izzle pretium. Daahng dawg sizzle amet lacus. Uhuh ... yih! eu nizzle eget lacizzle auctizzle yo. Praesent gizzle viverra crunk. Curabitizzle ghetto arcu. Vestibulizzle enim uhuh ... yih!, the bizzle pimpin', congue , sheezy nizzle, libero. Nullam vitae pede rizzle</p> 
        </div> 
        <div class="commitment"> 
         <p>Alex 2:</p> 
         <p>In sagittis leo stuff nisi. Shizzlin dizzle rhoncizzle, arcu check out this malesuada facilisizzle, dizzle nulla uhuh ... yih! shut the shizzle up, da bomb auctizzle cool felizzle a break yo neck, yall. Check out this volutpizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle augue. I saw beyonces tizzles and my pizzle went</p> 
        </div> 
        <div class="commitment"> 
         <p>Alex 3:</p> 
         <p>crizzle yippiyo. Maecenizzle tortor vel fo. Phasellus lobortizzle. Shizzle my nizzle crocodizzle things gizzle, shiznit nec, mah nizzle sure amizzle, pulvinar egestizzle, crazy. Vivamus mofo. Vestibulizzle ante doggy primizzle izzle own yo' break yo neck, yall luctizzle yo mamma ghetto posuere that's the shizzle</p> 
        </div> 
        <div class="commitment"> 
         <p>Alex 4:</p> 
         <p>Vestibulizzle shiznit ipsizzle primizzle black mofo orci its fo rizzle izzle ultricizzle posuere cool Curae; Sed vitae nulla quizzle ma nizzle ornare shiz. Phasellizzle get down get down da bomb. Praesent volutpizzle accumsan velizzle. Mammasay mammasa mamma oo sa mammasay mammasa m</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

的問題：

1. 第一列下來有點
2. 第三列正在降臨

如何才能使第一個和第三個與第二個一致？

Answer 1

做出改變成此行到CSS

#content-1, #content-2, #content-3 {  
    vertical-align: top; 
} 

Answer 2

嘗試增加float: left至＃內容-1和float: right至＃內容-3

添加以下CSS：

#content-1 { 
    width: 25%; 
    height: 100%; 
    float: left; 
} 
#content-2 { 
    width: 50%; 
    height: 100%; 
} 
#content-3 { 
    width: 20%; 
    height: 100%; 
    float: right; 
} 

Update fiddle

Answer 3

我希望你在尋找摹這樣的： - http://jsfiddle.net/wJ2ef/4/

隨着使用的float你可以適當調整你的div元素

Answer 4

或者你也可以做這樣的：

#content-1, #content-2, #content-3 { 
    display: table-cell; 
    vertical-align: top; 
} 

Answer 5

更改「顯示：inline-block的;」於：

#content-1, #content-2, #content-3 { 
    float: left; 
} 

Answer 6

#content-1, #content-2, #content-3 {  
    display: table-cell; 
}