Question

我遇到以下情况：我有一个容器，其显示设置为内联块。所以容器的宽度取决于它内部的内容。

在容器内部，我有两个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

<div class="Container">
    <span>
        <div class="div1"></div>
        <div class="div2"></div>
    </span>
</div>

演示：http://jsfiddle.net/C4Hcm/

Answer 1

两种可能的解决方案：

1）使用媒体查询，以便当浏览器达到一定大小时，css会发生变化。因此，当第二个div在此时下降时，您添加一个媒体查询，其中div都填充容器。 http://css-tricks.com/css-media-queries/

2）在你的尺寸而不是像素上使用百分比 - 使用像素使得div保持固定大小，使用百分比发生在浏览器中会使div达到你拥有的任何宽度的x％。

Answer 2

之所以发生这种情况，是因为您已将容器的宽度提到为100％，因此它会尝试容纳可用空间。同样对代码进行w3验证，div标签不能在span标签内。

Answer 3

使用小型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>

并且正文包含

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

CSS缩小浏览器窗口，浮动空白区域

3 个答案: