wrapping full width divs around a floating div
I'm trying to do something with a floating div, which I thought would be simplest ever, but I seem utterly unable to achieve what I want. I want to have a fixed width floating div and have all divs around it expand horizontally as far as they can without overlapping the floating div. That is, next to the floating div they should fill the space available next to it and under the floating div they should occupy the full width of the container.
I've tried every combination of position, display, width, and right properties I could think of, bu开发者_如何学Pythont nothing gives me what I want. I should think that I need to set the .fill divs to display: inline-block; and then manage the width of them with the width or right property, but nothing that I try gives me the available width.
Note that I can not know beforehand which divs will be next to the floating div, as the height of all divs is variable, thus I can not set explicit widths for the .fill divs.
<?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>
add overflow: hidden; to .fill
加载中,请稍侯......
精彩评论