Question

我有一个DIV容器，其中有几个内部DIV通过将它们全部悬空而排出。内部DIV可以在某些事件上改变宽度，并且包含DIV相应地调整。我在容器中使用float：left来保持缩小到内部div的宽度。我在内部div中使用float：left，所以即使内容发生变化，布局也是干净的。

问题在于我希望DIV容器的宽度和高度保持不变，除非特定事件导致内部宽度发生变化。从概念上讲，我想在内部使用float来获得布局优势，但后来我想“修复”它们以便它们不会浮动。因此，如果容器宽度为700px，我希望即使用户缩小浏览器窗口也能保持这种状态。我想要容器，它的内部DIV只能被浏览器窗口剪掉。

我觉得这可以在CSS中很好地完成，我只是无法弄清楚如何。如果有必要，我不反对添加另一个容器......

由于唯一需要的布局更改是基于事件的，我也愿意使用一些JS。但这有必要吗？（而且我还不确定我知道要修改什么：容器尺寸？内浮力？其他？）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">

      #canvas {
        overflow:auto;   /* for clearing floats */
      }

      #container {
        float:left;   /* so container shrinks around contained divs */
        border:thin solid blue;
      }

      .inner {
        float:left;   /* so inner elems line up nicely w/o saying fixed coords */
        padding-top:8px;
        padding-bottom:4px;
        padding-left:80px;
        padding-right:80px;
      }

      #inner1 {
        background-color:#ffdddd;
      }

      #inner2 {
        background-color:#ddffdd;
      }

      #inner3 {
        background-color:#ddddff;
      }

    </style>
  </head>
  <body>
    <div id="canvas">
      <div id="container">
        <div id="inner1" class="inner">
        inner 1
        </div>
        <div id="inner2" class="inner">
        inner 2
        </div>
        <div id="inner3" class="inner">
        inner 3
        </div>
      </div>
    </div>
    cleared element
  </body>
</html>

Answer 1

如果我理解正确，你可以做的是摆脱浮动，并使用display:inline-block进行布局。这样，只要您确保内部div之间没有空格或换行符，它就会被布局引擎视为单个单词，并且会保留在单行（因此，如果需要，可以放大包含<div>和/或溢出。您可以使用min-width和text-align:center进行一些样式改进。可以使用{{{}创建元素之间的间距内部margin上的1}}属性。

Answer 2

只要将容器的宽度设置为700px或css中的任何数字，元素就不应该浮动。另请注意，IE 7 and below不支持显示：内联块。

Answer 3

为了将来参考，这里的代码经过修改后使用了Paul的解决方案。它更简单，因为它不使用浮点数。只要注意div之间的空白区域。这在我的实际情况中不是问题，因为div是使用javascript / DOM生成的。

我发布此作为答案，而不是评论，以获取代码格式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">

      #container {
        display:inline-block;
        overflow:hidden;
        white-space:nowrap;
        border:thin solid blue;
      }

      .inner {
        display:inline-block;
        padding-top:8px;
        padding-bottom:4px;
        padding-left:180px;
        padding-right:80px;
      }

      #inner1 {
        background-color:#ffdddd;
      }

      #inner2 {
        background-color:#ddffdd;
      }

      #inner3 {
        background-color:#ddddff;
      }

    </style>
  </head>
  <body>
    <div id="container">
      <div id="inner1" class="inner">
      inner 1
      </div><div id="inner2" class="inner">
      inner 2
      </div><div id="inner3" class="inner">
      inner 3
      </div>
    </div>
  </body>
</html>

如何修复包含浮动元素的DIV的宽度？

3 个答案: