Css 如何固定包含浮动元素的DIV的宽度？_Css

Css 如何固定包含浮动元素的DIV的宽度？

css

Css 如何固定包含浮动元素的DIV的宽度？,css,Css,我有一个DIV容器，其中有几个内部DIV，通过将它们全部向左浮动来进行布局。内部DIV可能会在某些事件上更改宽度，并且包含的DIV会相应地调整。我在容器中使用float:left使其收缩到内部div的宽度。我在内部div中使用float:left，这样即使内容发生变化，布局也很干净问题是我希望DIV容器的宽度和高度保持不变，除非某个特定事件导致内部宽度发生变化。从概念上讲，为了布局的好处，我想在内部使用float，但是我想“修复”它们，使它们不会四处浮动。因此，如果容器的宽度为700px，我希

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

问题是我希望DIV容器的宽度和高度保持不变，除非某个特定事件导致内部宽度发生变化。从概念上讲，为了布局的好处，我想在内部使用float，但是我想“修复”它们，使它们不会四处浮动。因此，如果容器的宽度为700px，我希望即使用户缩小浏览器窗口，它也能保持这种宽度。我想要容器，它的内部div被浏览器窗口裁剪

我感觉这一切都可以在CSS中很好地完成，我只是不太明白如何做。我不反对在必要时添加另一个容器

因为唯一需要的布局更改是基于事件的，所以我也愿意使用一些JS。但这有必要吗？（我仍然不知道该修改什么：容器尺寸？内部浮动？其他？）


#帆布{
溢出：自动；/*用于清除浮动*/
}
#容器{
float:left；/*因此容器在包含的div周围收缩*/
边框：淡蓝色；
}
.内部{
float:left；/*所以内部元素很好地排列起来，没有固定坐标*/
填充顶部：8px；
垫底：4px；
左侧填充：80px；
右边填充：80px；
}
#内部1{
背景色：#ffdddd；
}
#内部2{
背景色：#ddffdd；
}
#内部3{
背景色：#ddff；
}
内部1
内部2
内部3
清除元素

如果我理解正确，您可以做的是去掉浮点数，并使用

显示：内联块进行布局。这样，只要确保内部div之间没有空格或换行符，布局引擎就会将其视为一个单词，并保持在一行上（从而扩大包含
和/或溢出（如果需要）。您可以使用最小宽度
和文本对齐：中心
进行一些风格改进。元素之间的间距可以通过使用内部
上的边距
属性来创建。
如果我理解正确，您可以做的是要消除浮动，并使用显示：内联块
进行布局。这样，只要确保内部div之间没有空格或换行符，布局引擎就会将其视为一个单词，并保留在一行上（从而扩大包含
和/或溢出（如果需要）。您可以使用最小宽度
和文本对齐：中心
进行一些风格改进。元素之间的间距可以通过使用内部
上的边距
属性来创建。
为将来参考，下面是代码，修改为u。）se Paul的解决方案。更简单的是，它不使用浮点数。请注意div之间的空白。这在我的实际情况中不是问题，因为div是使用javascript/DOM生成的
我把它作为一个答案，而不是一个评论，来获取代码格式

#容器{
显示：内联块；
溢出：隐藏；
空白：nowrap；
边框：淡蓝色；
}
.内部{
显示：内联块；
填充顶部：8px；
垫底：4px；
左侧填充：180px；
右边填充：80px；
}
#内部1{
背景色：#ffdddd；
}
#内部2{
背景色：#ddffdd；
}
#内部3{
背景色：#ddff；
}
内部1
内部2
内部3
为了将来的参考，这里的代码修改为使用Paul的解决方案。更简单的是，它不使用浮点数。请注意div之间的空白。这在我的实际情况中不是问题，因为div是使用javascript/DOM生成的
我把它作为一个答案，而不是一个评论，来获取代码格式

#容器{
显示：内联块；
溢出：隐藏；
空白：nowrap；
边框：淡蓝色；
}
.内部{
显示：内联块；
填充顶部：8px；
垫底：4px；
左侧填充：180px；
右边填充：80px；
}
#内部1{
背景色：#ffdddd；
}
#内部2{
背景色：#ddffdd；
}
#内部3{
背景色：#ddff；
}
内部1
内部2
内部3
只要将容器的宽度设置为700px或css中的任何数字，元素就不应该四处浮动。还要记住的是，显示：inline块不受支持。
只要将容器的宽度设置为700px或css中的任何数字，元素就不应该四处浮动。还要记住显示：不支持内联块
<!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>

<!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>