当溢出时保持div彼此相邻

I hope to explain my problem simple in order to get good feedback :)

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

Imagine this scenario: One DIV wrapper within two floating DIVs, next to each other, with fixed width. All of them with overflow hidden.

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

But when decreasing the width of the wrapper (or increasing the children's) the last DIV collapsed instead of hide. Please, check out the code. THANK you very much in advance!

但是当减小包装器的宽度(或增加子包的宽度)时,最后一个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>

How do you solve that? avoid the collapsing and keeping the floating and hiding if necessary?

你是怎么解决的?如果有必要,避免坍塌并保持漂浮和隐藏?

2 个解决方案

#1

This is the expected behavior. You will need to add another div inside your wrapper with a fixed width large enough to accommodate both floats.

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

Example:

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

#2

The width of your both inner divs should not be bigger the the width of the wrapper. In order for this code to work, .tContent must have 200px width. Also, see this http://www.w3.org/TR/CSS2/box.html

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

#1