wrapping full width divs around a floating div_问答_开发者

wrapping full width divs around a floating div

开发者 https://www.devze.com 2023-02-28 23:39 出处：网络

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 a

相关专题：css xhtml

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