css - 溢出时保持div彼此相邻 float

Question

我希望简单地解释我的问题以获得良好的反馈:)

想象一下这个场景:两个 float 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>

你是怎么解决的？必要时避免折叠并保持 float 和隐藏？

Answer 1

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

例子:

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