2013-10-04 67 views
1

下面我的代碼:CSS - 對齊錯鉻

<div style="width: 100%; height: 400px; border-bottom: 1px; text-align: center"> 
    <div style="float: left; width: 33%;">test</div> 
    <div style="display: inline-block; width: 33%;">test</div> 
    <div style="float: right; width: 33%;">test</div> 
</div> 

normal resolution 這是一個正常的分辨率的屏幕:

這是一個非常小的分辨率的屏幕: very small resolution

爲什麼在分辨率非常小的divs並不都是33%?怎麼解決?

回答

1

你想要這樣的東西 - 對嗎?它可以在任何分辨率下工作。使用相同的標記。

jsFiddle demo here - 使用相同的標記。

注意:inline-block元素生成2px頁邊距,因此每個元素的寬度不能爲33%。要麼刪除空白區域,要麼僅使用30%的寬度。

在上面的示例中,我只是刪除了空白區域。或者,您可以設置margin:-2px;

+0

謝謝你很多:) – user2843341

0

要麼給所有三個width: 33%的div float: left的(如果需要的話,但中間的一個需要一個浮動,以及你可以離開最後一個爲float: right)或完全消除花車,並給他們所有display: inline-block;

0

不知道爲什麼你的中間div設置爲display: inline-block;。 div的繼承display: block;。嘗試下面的CSS/HTML。在我的本地機器上運行。

<style type="text/css"> 

.wrap { 
    width: 100%; 
    height: 400px; 
    border-bottom: 1px; 
    text-align: center; 
} 

.wrap div { 
    float: left; 
    width: 33%; 
    margin: 0 auto; 
    padding: 0; 
} 

.left { 
    background-color: red; 
} 

.middle { 
    background-color: blue; 
} 

.right { 
    background-color: green; 
} 

.clearThis { 
    width: 100%; 
    height: 0; 
    float: none; 
    margin: 0 auto; 
    padding: 0; 
    clear:both; 
} 

</style> 


<div class="wrap"> 
    <div class="left">test</div> 
    <div class="middle">test</div> 
    <div class="right">test</div> 
    <div class="clearThis"></div> 
</div> 
+0

沒有額外的編碼是必需的,請參閱我的答案。 –

+0

額外的編碼是'clearThis'? –

+0

是的,這不是一個清除它的問題 - 它是'inline-block'元素產生餘量的問題。 –