2

我处于以下情况：我有一个显示设置为 inline-block 的容器。所以容器的宽度取决于里面的内容。

在容器内，我有两个向左浮动的 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/

4

3 回答 3

3

两种可能的解决方案：

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

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

于 2013-03-26T09:44:03.463 回答
0

发生这种情况是因为您将容器的宽度提到为 100%，因此它试图容纳可用空间。还要对您的代码进行 w3 验证，div 标签不能在 span 标签内。

于 2013-03-26T10:01:00.827 回答
0

使用一个小的 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>

于 2013-03-26T11:50:47.170 回答