右側div的內聯塊似乎沒有生效

Question

我是CSS的新手。我正在處理一個HTML內容，我希望在單行中看起來像3列。我有以下嵌入式HTML：

<style type="text/css"> 
    #main { 
     width: 100%; 
     height: 250px; 
    } 

    #left-side { 
     width: 20%; 
     float: left; 
     height: 100%; 
    } 

    #in-the-middle { 
     width: 60%; 
     text-align: center; 
     display: inline-block; 
     height: 100%; 
    } 

    #right-side { 
     width: 20%; 
     display: inline-block; 
     height: 100%; 
    } 

</style> 

<div id="main"> 

    <div id="left-side" align="left"> 
     Hello left 
    </div> 
    <div id="in-the-middle" align="center"> 
     Hello center 
    </div> 
    <div id="right-side"> 
     Hello right 
    </div> 
</div> 

看起來很簡單，但不幸的是，「Hello right」文本顯示在頁面的左側。我已經將＃右側的顯示設置爲內嵌塊，期望它顯示在「Hello center」div旁邊，但似乎不起作用。任何人都可以看到我在這裏失蹤？

Answer 1

由於成爲內聯呈現的元素，塗白HTML代碼中的空間會影響渲染。由於您的div之間有空格，因此瀏覽器將在它們之間呈現幾個像素的白色空格。

如果你想使用inline-block沒有float，解決的辦法是刪除每個結束標記</div>開放<div>標籤之間的空格，就像他：

<div id="left-side"> 
    Hello left 
</div><div id="in-the-middle"> 
    Hello center 
</div><div id="right-side"> 
    Hello right 
</div> 

見真人這裏：http://jsfiddle.net/LbNGq/

Answer 2

用你的右側的div寬度略小話，就說明在同一列

#right-side { 
    width: 19%; 
    display: inline-block; 
    height: 100%; 
} 

See Demo

Answer 3

使用float:left與display: inline-block

Answer 4

試試這個css腳本

<style type="text/css"> 
#main { 
    width: 100%; 
    height: 250px; 
    display: inline-block; 
} 

#left-side { 
    width: 20%; 
    float: left; 
    height: 100%; 
} 

#in-the-middle { 
    width: 60%; 
    text-align: center; 
    display: inline-block; 
    height: 100%; 
    float:left; 
} 

#right-side { 
    width: 20%; 
    display: inline-block; 
    height: 100%; 
    float:left; 
}