溢出問題：隱藏;和漂浮

這是我溢出問題：隱藏;和漂浮

This is what I have

這就是我想要

This is what I want

基本上橙色元素是一個「容器」 DIV具有溢出：隱藏;我希望它的子div可以「適應它」，即使它向右溢出。第一張圖片代表我獲得的第一張照片，第二張照片代表我期望的代碼。

要解決這個問題，我已經添加了另一個div的寬度：1000000px;但我認爲這不是一個乾淨的解決方案。還有其他方法可以解決這個問題嗎？

（我使用的是最新的谷歌瀏覽器）

來源

2011-07-20 Manhim

在您的容器元素，指定空白：NOWRAP和不上浮的項目裏面，而集顯：他們inline-block的。

下面是一個例子：

<!DOCTYPE html> 
<html> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 

<style type="text/css"> 
.container{ 
    height: 130px; 
    width: 550px;; 
    background: #111; 
    white-space:nowrap; 
    overflow:hidden; 
} 

.item{ 
    display: inline-block; 
    width: 200px; 
    height: 100px; 
    background-color:aqua; 
} 
</style> 

</head> 

<body> 
<div class="container"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
</div> 
</body> 

</html>

UPDATE

做了一些閱讀，奇怪的是，連續的inline-block的元素之間的空間被刪除，如果你改變你的HTML看起來像這個：

<div class="container"> 
    <div class="item"></div><div class="item"></div><div class="item"></div> 
</div>

看看這個問題的答案：Unwanted margin in inline-block list items。

來源

2011-07-20 07:08:54 cfouche

它的工作原理，但現在我的每個元素後有空間約4PX，我怎麼去除呢？ – Manhim

沒關係，做了我的研究:) – Manhim

修復了保證金問題，在這個小提琴中更新：http：//jsfiddle.net/XK7tS/2/信用額度：http://robertnyman.com/2010/02/24/css- display-in-line-block-why-it-rocks-and-why-it-sucks/ – epoch

這裏是一個小提琴：http://jsfiddle.net/XK7tS/

來源

2011-07-20 07:12:22 epoch

溢出問題：隱藏;和漂浮

回答

相關問題