Html CSS收缩浏览器窗口，浮动空白

我的情况如下： 我有一个容器，其显示设置为内联块。因此，容器的宽度取决于其中的内容

在容器内，我有两个div漂浮在左边；两者都有固定的宽度；当浏览器窗口宽度大于两个div的宽度之和时，div彼此相邻浮动

但是，我的问题来了，当我缩小浏览器窗口使两个div不再相邻时，第二个浮动div位于第一个浮动div之下（应该这样，我对此很满意），但是容器的宽度不会修改，即使第二个div不再存在，容器仍然为它保留空间。我会将容器与更大的浮动div的宽度联系起来

任何帮助都将不胜感激。非常感谢

.Container {
    position:absolute;
    top:180px;
    width:100%;
    text-align:center;
    background: #DDD;
}
.Container span {
    position:relative;
    margin-top:0px;
    text-align:left;
    display: -moz-inline-stack;
    display:inline-block;
    zoom: 1;
    *display: inline;
    cursor:default;
    background: red;
}
.div1 {
    display:block;
    float:left;
    padding:0;
    width:100px;
    background: coral;
}
.div2 {
    display:block;
    float:left;
    padding:0;
    width:200px;
    background: #45dc2a;
}

HTML

---

演示：

两种可能的解决方案：

1） 使用媒体查询，以便当浏览器达到一定大小时，css会发生更改。因此，当第二个div在该点下降时，您将添加一个媒体查询，其中两个div都将填充容器

---

2） 在大小上使用百分比，而不是像素-使用像素会使div保持固定大小。浏览器使用百分比会使div为您拥有的任何宽度的x%。

之所以会这样，是因为您提到容器的宽度为100%，所以它会尝试容纳可用空间。还要对代码进行w3验证，div标记不能位于span标记内。

使用一个小jquery脚本尝试以下操作

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style type="text/css">
.container{
background: yellow;
width: 100%;
}
.container .secondContainer {
    text-align:left;
background: blue;
display: inline-block;
max-width: 300px;
}

.div1 {
width:100px;
background: coral;
float: left;
}
.div2 {
width:200px;
background: #45dc2a;
float: left;
}
</style>
<script>

 $(window).resize(function(){
if($(".container").width() >= "300"){
$(".div1,.div2").css("float", "left");
}else{
  $(".div1,.div2").css("float", "none");

}
});
</script>

.集装箱{
背景：黄色；
宽度：100%；
}
.容器.第二个容器{
文本对齐：左对齐；
背景：蓝色；
显示：内联块；
最大宽度：300px；
}
.1分部{
宽度：100px；
背景：珊瑚；
浮动：左；
}
.第2分部{
宽度：200px；
背景#45dc2a；
浮动：左；
}
$（窗口）。调整大小（函数（）{
如果（$（“.container”）.width（）>=“300”）{
$（.div1.div2”）.css（“float”，“left”）；
}否则{
$（.div1.div2”）.css（“浮动”、“无”）；
}
});

身体里有

<div class="container">
<div class="secondContainer">
    <div class="div1">This is a text container  </div>
    <div class="div2"> This is a text container This is a text container</div>
</div>

这是一个文本容器
这是一个文本容器这是一个文本容器

---

如果您希望我们能够帮助您使用设置宽度，您需要向我们展示您的代码。如果您希望设置宽度缩小/增大，您需要使用百分比。谢谢您的回复。是的，我知道我可以通过媒体查询做到这一点，但我有点喜欢远离他们，因为他们需要为每一种情况写作，我正在寻找更自动化的东西。例如，如果在每次页面刷新时浮动div的宽度不同，我需要另一个媒体查询，我发现它有点混乱。至于百分比概念，我不能使用它，因为容器是内联块，所以它没有定义的宽度。如果我在里面的元素上设置了宽度x%，他们就不知道自己设置的宽度。有趣的是，在旧版本的IE上，我得到了我想要的行为。现代浏览器似乎已经改变了规则，当浮动崩溃时，内联块容器的宽度保持不变。然后更改css和html或使用javascript。为什么是内联块？span没有尝试修改任何内容，因为它被设置为内联块，所以其宽度由其内容设置。即使我将文本放在span中，而不是那些div中，它的行为仍然相同。

<div class="container">
<div class="secondContainer">
    <div class="div1">This is a text container  </div>
    <div class="div2"> This is a text container This is a text container</div>
</div>