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元素。