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

【问题标题】：How to fix width of DIV that contains floated elements?如何修复包含浮动元素的 DIV 的宽度？
【发布时间】：2017-05-23 20:16:01
【问题描述】：

我有一个 DIV 容器，其中有几个内部 DIV，它们通过将它们全部浮动来布局。内部 DIV 可能会在某些事件上更改宽度，并且包含 DIV 会相应调整。我在容器中使用 float:left 以使其缩小到内部 div 的宽度。我在内部 div 中使用 float:left，因此即使内容发生变化，布局也很干净。

关键是我希望 DIV 容器的宽度和高度保持不变，除非特定事件导致内部宽度发生变化。从概念上讲，我想在内部使用浮动以获得布局优势，但随后我想“修复”它们，使它们不会浮动。因此，如果容器是 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>

【问题讨论】：

标签： css

【解决方案1】：

如果我理解正确，您可以做的是摆脱浮动，并使用display:inline-block 进行布局。这样，只要您确保内部 div 之间没有空格或 换行符 ，布局引擎就会将其视为单个单词，并保持不变单行（从而扩大包含 <div> 和/或在需要时溢出。您可以使用 min-width 和 text-align:center 进行一些风格改进。可以通过使用内部 @ 上的 margin 属性来创建元素之间的间距987654326@s.

【讨论】：

【解决方案2】：

只要将容器的宽度设置为 700px 或 css 中的任何数字，元素就不应浮动。另请注意，IE 7 and below 不支持 display: inline-block。

【讨论】：

【解决方案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>

【讨论】：