3 div不適合1行

Question

我想將一行分成3部分：20％，60％和20％。但由於某種原因，總寬度超過100％，最後一個元素在新行上顯示。問題是什麼？ 我爲所有三個添加了邊距0和填充0。和20％+ 60％+ 20％= 100％

CSS：

#text_area_row 
    { 
     position:relative; 
     font-size:80px; 
     width:auto; 
     cursor:default; 
     top:10%; 
     margin: 0; 
     padding:0; 
    } 
    #text_area_center 
    { 
     text-align:center; 
     display:inline-block; 
     margin:0; 
     padding:0; 
     width:60%; 
     overflow:hidden; 
    } 
    #center_div 
    { 
     margin:0 auto; 
    } 
    #text_area_left 
    { 
     text-align:left; 
     position:relative; 
     display:inline-block; 
     opacity:0.5; 
     filter: alpha(opacity=50); 
     width:20%; 
     margin:0; 
     padding:0; 
     overflow:hidden; 
    } 
    #text_area_right 
    { 
     position:relative; 
     text-align:right; 
     display:inline-block; 
     opacity:0.5; 
     filter: alpha(opacity=50); 
     width:20%; 
     margin:0; 
     padding:0; 
     overflow:hidden; 
    } 

HTML：

<div id='text_area_row'> 
       <div id='text_area_left'> 
         <div class="card_style"></div> 
       </div> 
       <div id='text_area_center'> 
        <div id='center_div'> 
         <div class="card_style"></div> 
        </div> 
       </div> 
       <div id='text_area_right'> 
         <div class="card_style"></div> 
       </div> 


      </div> 

Answer 1

問題是空白，因爲您已將您的div元素display:inline-block

你可以通過刪除那些div標籤之間的空白壓縮你的HTML ..

<div id='text_area_left'> 
    <div class="card_style"></div> 
</div><div id='text_area_center'> 
     <div id='center_div'> 
      <div class="card_style"></div> 
     </div> 
</div><div id='text_area_right'> 
     <div class="card_style"></div> 
</div> 

---

另一個竅門（如果你想保持代碼格式）是註釋掉空白

<div id='text_area_left'> 
     <div class="card_style">1</div> 
</div><!-- 
--><div id='text_area_center'> 
    <div id='center_div'> 
     2 
    </div> 
</div><!-- 
--><div id='text_area_right'> 
     <div class="card_style">3</div> 
</div> 

演示在http://jsfiddle.net/xYdWq/

Answer 2

使用float:left爲div的text_area_left，text_area_center，text_area_center
這裏您的演示http://jsfiddle.net/N6fwu/