Почему divs исчезают при использовании float с%?

кажется, что, когда я использую поплавок и% для ширины другие дивы исчезаютПочему divs исчезают при использовании float с%?

<div id="banner"> 
<div id="container"> 

     <div class="right"> 
     <div class="topimage"></div> 
     <div class="bottomimage"></div> 
     </div> 
     <div class="bigimage"></div> 

</div> 
</div>

CSS:

#banner { 
margin-top: 30px; 
} 

#container { 
width: 80%; 
margin: auto; 
} 

.right { 
Float: right; 
} 

.topimage { 
background: url(img1.jpg) no-repeat; 
background-size: cover; 
width: 20%; 
height: 150px; 
} 

.bottomimage { 
background: url(img2.jpg) no-repeat; 
background-size: cover; 
width: 20%; 
height: 150px; 
} 

.bigimage { 
background: url(imgbig.jpg) no-repeat; 
background-size: cover; 
width: 80%; 
height: 300px; 
}

теперь это делает 2 небольших дивы исчезают, как ни странно, когда я установил ширину 3 ребенок дивы на пикселей, работает просто отлично ..

источник

2013-10-15 Magdi Gamal

Когда вы говорите, что два других «исчезают», они просто исчезают или переместить куда-нибудь на этой странице? –

Существует некоторая пометка/маржа по умолчанию? Может быть, некоторые «сброс» CSS могут помочь ему ... –

Несомненно, они составляют 20% от ширины плавающего div, но какова ширина плавающего div? Какова ширина плавающего элемента, у которого нет конкретного контента? Поместите некоторый контент в плавающий div, например строку текста, и появятся две более мелкие div. [Fiddle] (http://jsfiddle.net/Hy8HE/) –

При использовании поплавка элемент принимает в нем ширину содержимого. И поскольку у вас нет контента, ширина равна 0px. Так что даже 100% 0px все еще 0px.

Вы должны добавить некоторую ширину в «плавающий div» или добавить некоторый контент в пустые div.

.right { 
float: right; 
width: 50%; 
}

Demo

источник

2013-10-15 16:11:49 drip

yup, вот и все, спасибо. –

Вы забыли установить ширину правого элемента:

.right { 
    float: right; 
    width: 20%; 
}

Теперь просто установите ширину дочерних элементов на 100%.

.topimage { 
    background: url(img1.jpg) no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: 150px; 
} 

.bottomimage { 
    background: url(img2.jpg) no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: 150px; 
}

источник

2013-10-15 16:10:34 rkawano

Почему divs исчезают при использовании float с%?

ответ

Смежные вопросы