Wysokość kontenera CSV CSV. Pytania dotyczące pływających DIV:

Question

Czy możesz wymusić wysokość DIV kontenera, aby pomieścić dwa pływające dzieci div? Czy jest jakaś sztuczka, której mogę użyć, aby to zrobić? Próbuję zrobić dwóch div równomiernie wielkości wewnątrz div jednostki. Chciałbym, żeby pojawiły się obok siebie z niewielkim odstępem między nimi. Dziecko 2 ma tendencję do wyskakiwania i schodzenia poniżej Child1. Uwaga: Dziecko 2 zawiera tabelę. Czy powinienem się unosić?

HTML:

<div id="parent"> 
    <div id="child1"></div> 
    <div id="child2"> 
    <table><tr><td>content</td></tr></table> 
</div> 
</div> 

CSS:

div#parent 
{ 
    background-color: #C6E4E0; 
    border: solid 3px #017E6F; 
    font-family: Arial; 
    font-size: 10pt; 
    font-weight: bold; 
    padding-left: 5px; 
    padding-right: 5px; 
    width:99%; 
} 

div#parent div 
{ 
    width:49%; 
    float:right; 
    padding:3px; 
} 

div#parent div:first-child 
{ 
    float:left; 
} 

Answer 1

#container { width:200px; } 
.floated { width:100px; float:left; } 
.clear  { clear:both; } 

<div id="container"> 
    <div class="floated">A</div> 
    <div class="floated">B</div> 
    <div class="clear"></div> 
</div> 

Answer 2

Nie jestem fanem clear: both;, wolałbym zrobić to w przykładzie Jonathan Sampsons:

#container { width:200px; overflow: hidden; } 
.floated { width:100px; float:left; } 

 

<div id="container"> 
    <div class="floated">A</div> 
    <div class="floated">B</div> 
</div> 

Answer 3

Nawiasem mówiąc, chcesz

div#parent > div { float:left; }

zamiast

div#parent div:first-child { float:left; }

który nadal nie jest przyjazny dla IE6, ale będzie unosić się zarówno DIV potomnych.

Answer 4

Używam klasy clearfix.

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

.clearfix { 
    display: inline-block; 
} 

/* Hides from IE-mac \*/ 
/** html .clearfix {height: 1%;}*/ 

.clearfix { 
    display: block; 
} 

/* End hide from IE-mac */ 

następnie użyj klasy w każdym kontenerze z elementem pływającym.

Answer 5

To nie jest kwestia czystych błędów, jego problemem jest to, że jego dwa pływające divy nie pojawiają się obok siebie.

Po pierwsze, nie trzeba ustawiać szerokości elementu nadrzędnego, elementy div są elementami blokowymi, co oznacza, że ​​automatycznie dostosowują swoją szerokość, aby zajmowały całą szerokość swojego rodzica (w tym przypadku prawdopodobnie jest to rodzic div # parent to ciało).

Ponieważ ustawiasz szerokość jawnie ORAZ nadając jej dopełnienie, może ona potencjalnie rozciągać się POZA ciałem. To naprawdę nie ma znaczenia, ale jeśli zastosujesz tę samą wiedzę do dzieci, które są pływające divy i zobaczysz, dlaczego właściwa osoba może spaść na dno.

Po pierwsze, jeśli jawnie ustawiasz szerokości elementów div na wartość procentową, nie musisz dodawać dopełnienia. Ponieważ masz do czynienia z procentowymi szerokościami, lepiej jest dodać dopełnienie do zawartości elementów div zamiast samych div, ponieważ dopełnienie jest DODANO do szerokości. Dlatego też, jeśli dodałeś wypełnienie 10px do elementu div, który miał szerokość 49% w elemencie nadrzędnym o wielkości 100 pikseli, miałby szerokość 49px + 10px + 10px (2 strony) o łącznej obliczonej szerokości 69px.

Ponieważ nie publikujesz znaczników i treści lub przeglądarki, w której testujesz, nie mogę dokładnie określić, dlaczego element div jest atakowany. Istnieją dwie prawdopodobne możliwości.

1. Używasz IE, który pozwala tabelom wykraczać poza jego div div, co spowoduje uszkodzenie. Spróbuj jawnie ustawić szerokość tabeli na procent swojego rodzica lub coś podobnego.
2. Szerokość 49% + dopełnienie = większa niż [szerokość nadrzędna] - [szerokość lewej strony-div]. Spowoduje to awarię, ponieważ lewy div i prawy div są zbyt szerokie dla szerokości rodzica.