Сохранение плавающих элементов div рядом друг с другом при переполнении

Я надеюсь объяснить мою проблему просто, чтобы получить хорошие отзывы :)

Представьте себе такой сценарий: одна оболочка 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>

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


css overflow css-float
person Teknotica    schedule 15.07.2009    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Это ожидаемое поведение. Вам нужно будет добавить еще один 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>
person jeroen    schedule 15.07.2009
comment
Спасибо за ваш ответ. Теперь мой вопрос: представьте, что ширина оболочки составляет 100%, но у меня внутри достаточно детей (плавающих рядом друг с другом), превышающих эту ширину. Они рухнут. Есть ли способ воспроизвести тот же скрытый эффект переполнения, что и один div? Спасибо! - person Teknotica; 15.07.2009
comment
Где-то здесь я читал решение, которое настраивало дочерние элементы для отображения: встроенный блок, но я не мог заставить его работать во всех браузерах, поэтому я использовал jQuery для динамической установки ширины div с фиксированной шириной (суммируя все ширины дети). - person jeroen; 15.07.2009
comment
Хорошо, тогда посмотрю. Ваше здоровье :) - person Teknotica; 15.07.2009
comment
Я нашел этот плагин jQuery, который работает для того, что я хочу сделать. Я надеюсь, что это сработает для кого-то еще: welcome.totheinter.net/columnizer-jquery-plugin - person Teknotica; 15.07.2009
comment
Интересно, хотя и немного не связано с вашим первоначальным вопросом ;-) - person jeroen; 15.07.2009
comment
Что ж, он решает то, что я хочу: большие фрагменты текста (плавающие элементы div) рядом друг с другом, даже если они превышают размер его родителя. Посмотрите на пример №5 и вы увидите, что я хотел - person Teknotica; 15.07.2009
comment
Вы правы, в основном это пример, который я вам привел, где ширина широкого блока установлена ​​​​на 3300 пикселей. Использование плагина только для определения ширины кажется немного излишним, я добавлю немного jQuery в свой пример на случай, если вы захотите сделать это самостоятельно. - person jeroen; 15.07.2009

arrow_upward
0
arrow_downward

Ширина ваших обоих внутренних div не должна быть больше ширины обертки. Чтобы этот код работал, .tContent должен иметь ширину 200 пикселей. Также см. этот http://www.w3.org/TR/CSS2/box.html

person Community    schedule 15.07.2009