圍繞浮動div包圍全寬div

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

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

請注意，由於所有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>

來源

2011-04-26 wich

添加overflow: hidden;到.fill

來源

2011-04-26 14:10:58 clairesuzy

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

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

圍繞浮動div包圍全寬div

回答

相關問題