2011-04-26 117 views
2

我正在嘗試使用浮動div做什麼,我認爲這將是最簡單的,但我似乎完全無法實現我想要的。我想要有一個固定寬度的浮動div,並讓它周圍的所有div都水平擴展,儘可能地不會與浮動div重疊。也就是說,在浮動div旁邊,他們應該填充它旁邊可用的空間,並且在浮動div下,它們應該佔據容器的整個寬度。圍繞浮動div包圍全寬div

我試過position,display,widthright屬性我想到的所有組合,但沒有任何東西給我想要的東西。我應該認爲我需要將.fill div設置爲display: inline-block;,然後用widthright屬性來管理它們的寬度,但是我沒有試過給出的寬度爲的可用範圍

請注意,由於所有div的高度都是可變的,因此我無法預先知道哪些div將位於浮動div旁邊,因此我無法爲div設置顯式寬度。

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html version="-//W3C//DTD XHTML 1.1//EN" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:s 
chemaLocation="http://www.w3.org/1999/xhtml http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"> 
<head> 
    <title>float test</title> 
    <style type="text/css"> 
    html, body, div { 
     margin: 0; 
     border: 0; 
     padding: 0; 
    } 
    #container { 
     position: relative; 
     width: 100%; 
     overflow: hidden; 
    } 
    #right { 
     width: 20em; 
     height: 40em; 
     margin: 0 0 0 1em; 
     float: right; 
     background-color: #88f; 
     opacity: .5; 
    } 
    .fill { 
     height: 3em; 
     margin: 1em; 
     background-color: #f88; 
     opacity: .5; 
    } 
    </style> 
</head> 
<body> 
    <div id="container"> 
    <div id="right"></div> 
    <div id="left"> 
     <div class="fill"></div><div class="fill"></div><div class="fill"></div><div class="fill"></div> 
     <div class="fill"></div><div class="fill"></div><div class="fill"></div><div class="fill"></div> 
     <div class="fill"></div><div class="fill"></div><div class="fill"></div><div class="fill"></div> 
     <div class="fill"></div><div class="fill"></div><div class="fill"></div><div class="fill"></div> 
    </div> 
    </div> 
</body> 
</html> 

回答

3

添加overflow: hidden;.fill

+0

謝謝!爲什麼我不試試... – wich 2011-04-26 14:27:44

+0

你是受歡迎的..有時它是多餘的眼睛';)' – clairesuzy 2011-04-26 15:26:00