CSS寬度問題

Question

所以，我有一個包含兩個div的容器跳水。

#main_container { 
margin: 0 auto; 
width: 980px; 
padding: 0 0 0 0; 
border: none; 
} 
    .content_third { 
    display: inline-block; 
    width: 326px; 
    padding: 0 0 0 0; 
    border: none; 
    } 

    .content_two { 
    display: inline-block; 
    width: 653px; 
    vertical-align: top; 
    padding: 0 0 0 0; 
    border: none; 
    } 




<div id="main_container"> 
      <div class="content_third"> 
      hello world! 

      </div> 
      <div class="content_two"> 
      Hello World! 
      </div> 
     </div> 

div垂直堆疊，而不是像我需要的水平排列。寬度加起來（326px + 653px = 979px），所以我不知道爲什麼他們不會正確排列。有什麼想法發生在這裏？

Answer 1

這將有助於查看HTML，但最好的猜測是，你有這樣的事情：

<div class="content_third"> 
    foo 
</div> 
<div class="content_two"> 
    bar 
</div> 

因爲兩者的div有display: inline-block;的div之間的空白變得有意義，即在它們之間添加空格字符。更改HTML，以便沒有空白（換行，空格）在所有的div之間：

<div class="content_third"> 
    foo 
</div><div class="content_two"> 
    bar 
</div> 

Answer 2

A <div>是一個塊級元素，每個元素根據定義開始一個新行。您可以使用style="display: inline"或使用<span>而不是<div>來更改。

Answer 3

只需將其添加到CSS中的div：display: inline;即可。

工作小提琴：http://jsfiddle.net/7WFxA/

Answer 4

.content_third { 
float:left; /*remove display:inline-block*/ 
width: 326px; 
padding: 0 0 0 0; 
border: none; 
} 

.content_two { 
float:left; /*remove display:inline-block*/ 
width: 653px; 
vertical-align: top; 
padding: 0 0 0 0; 
border: none; 
} 


<div id="main_container"> 
      <div class="content_third"> 
      hello world! 

      </div> 
      <div class="content_two"> 
      Hello World! 
      </div> 
      <div style="clear:both"></div>  
     </div> 

Answer 5

只需添加float: left;到兩個孩子的DIV元素。