问将全宽度div环绕在浮动div周围
EN

Stack Overflow用户

提问于 2011-04-26 12:32:13

回答 1查看 1.1K关注 0票数 2

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

我尝试过position、display、width和right属性的每一个组合，但是没有任何东西给我想要的东西。我应该认为我需要将.fill div设置为display: inline-block;，然后使用width或right属性管理它们的宽度，但是我尝试的任何东西都不会给出可用的宽度。

请注意，由于所有div的高度都是可变的，因此无法为.fill 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>

css

xhtml

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-04-26 14:10:58

将overflow: hidden;添加到.fill

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/5790340

复制

相似问题

问将全宽度div环绕在浮动div周围
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将全宽度div环绕在浮动div周围EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将全宽度div环绕在浮动div周围
EN