Question

我希望能够简单地解释我的问题以获得良好的反馈：）

想象一下这种情况：两个浮动DIV中的一个DIV包装器，彼此相邻，具有固定宽度。所有这些都隐藏了溢出。

但是当减小包装器的宽度（或增加子包的宽度）时，最后一个DIV会折叠而不是隐藏。请查看代码。非常感谢你！

#wrapper{
    width:400px;    
    overflow:hidden;
    border:1px dashed #0033FF;      
}
#wrapper .tContent{
    width:210px;    
    height:200px;   
    float:left;
    overflow:hidden;        
}

 HTML:
<div id="wrapper">
<div class="tContent">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </p>
</div>
  <div class="tContent">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat        </p>
 </div>

你是如何解决这个问题的？如果有必要，避免坍塌并保持浮动和隐藏？

Answer 1

这是预期的行为。您需要在包装器中添加另一个div，其固定宽度足以容纳两个浮动。

示例：

<div id="wrapper">
    <div class="wide">
        <div class="tContent">
        </div>
        <div class="tContent">
        </div>
    </div>
</div>

<script type="text/javascript">

    var total = 0;

    $(window).load(function() {

        $(".tContent").each(function(){ 
            total += $(this).width();
        });

        $(".wide").width(total);

    });
</script>

Answer 2

两个内部div的宽度不应该大于包装器的宽度。为了使此代码有效，.tContent的宽度必须为200px。另请参阅此http://www.w3.org/TR/CSS2/box.html

当溢出时保持div彼此相邻

2 个答案: