Я пытаюсь что-то сделать с плавающим div, что, как мне показалось, будет самым простым, но я, кажется, совершенно не в состоянии достичь того, чего хочу.Я хочу иметь плавающий div фиксированной ширины, и чтобы все div вокруг него расширялись по горизонтали, насколько это возможно, не перекрывая плавающий div.То есть, рядом с плавающим div они должны заполнять пространство, доступное рядом с ним, а под плавающим div они должны занимать всю ширину контейнера.
Я пробовал каждую комбинацию position, display, width и right свойства, которые я мог придумать, но ничто не дает мне то, что я хочу.Я должен подумать, что мне нужно установить .fill divs на display: inline-block;, а затем управлять их шириной с помощью свойства width или right, но ничего, что я пробую, не дает мне available width.
Обратите внимание, что я не могу заранее знать, какие div будут рядом с плавающим div, поскольку высота всех div является переменной, поэтому я не могу установить явную ширину для .fill 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>