Держите div, плавающие рядом друг с другом при переполнении - PullRequest
Новая
       11

Держите div, плавающие рядом друг с другом при переполнении

0 голосов
/ 15 июля 2009

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

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

Как вы решаете это? избежать разрушения и удержания плавающего и скрывающегося при необходимости?

Ответы [ 2 ]

2 голосов
/ 15 июля 2009

Это ожидаемое поведение. Вам нужно будет добавить еще один 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>
0 голосов
/ 15 июля 2009

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

...