Fatal编程技术网
  • css/
  • Css 围绕浮动div环绕全宽div

Css 围绕浮动div环绕全宽div

css

Css 围绕浮动div环绕全宽div,css,xhtml,Css,Xhtml,我试图用浮动div做一些事情，我认为这是最简单的，但我似乎完全无法实现我想要的。我希望有一个固定宽度的浮动div，并让它周围的所有div尽可能水平扩展，而不与浮动div重叠。也就是说，在浮动div旁边，它们应该填充它旁边的可用空间，在浮动div下面，它们应该占据容器的整个宽度 我尝试了我能想到的位置、显示、宽度、和右属性的每一种组合，但没有任何东西能满足我的需求。我应该认为我需要将.filldivs设置为显示：内联块然后使用width或right属性管理它们的宽度，但我尝试的任何内容都无法提供可

我试图用浮动div做一些事情，我认为这是最简单的，但我似乎完全无法实现我想要的。我希望有一个固定宽度的浮动div，并让它周围的所有div尽可能水平扩展，而不与浮动div重叠。也就是说，在浮动div旁边，它们应该填充它旁边的可用空间，在浮动div下面，它们应该占据容器的整个宽度

我尝试了我能想到的
位置
、
显示
、
宽度
、和
右
属性的每一种组合，但没有任何东西能满足我的需求。我应该认为我需要将
.fill
divs设置为
显示：内联块
然后使用
width
或
right
属性管理它们的宽度，但我尝试的任何内容都无法提供可用的宽度

请注意，我无法事先知道浮动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>


浮子试验
html，body，div{
保证金：0；
边界：0；
填充：0；
}
#容器{
位置：相对位置；
宽度：100%；
溢出：隐藏；
}
#对{
宽度：20em；
高度：40公分；
边距：0.1米；
浮动：对；
背景色：#88f；
不透明度：.5；
}
.填充{
高度：3em；
边缘：1米；
背景色：#f88；
不透明度：.5；
}
添加
溢出：隐藏到
。填充
不客气。。有时，这是一双额外的眼睛