围绕浮动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

回答

相关问题