0

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

想象一下这种情况：两个浮动 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>

你怎么解决这个问题？必要时避免折叠并保持浮动和隐藏？

4

2 回答 2

2

这是预期的行为。您需要在包装器中添加另一个 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>
于 2009-07-15T13:46:20.093 回答
0

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

于 2009-07-15T13:46:27.723 回答