Altezza DIV contenitore CSS. Domande DIV floating

Question

Puoi forzare un'altezza DIV del contenitore per accogliere due bambini div floated? C'è un trucco elegante che posso usare per farlo? Sto cercando di fare due div di dimensioni uguali all'interno del div padre. Vorrei che comparissero fianco a fianco con un piccolo spazio bianco tra di loro. Child2 tende a saltar fuori e andare sotto Child1. Nota Child2 contiene una tabella. Dovrei essere galleggiante?

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

Non sono un fan di clear: both;, io invece faccio a Jonathan Sampsons esempio:

#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

Tra l'altro, si vuole

div#parent > div { float:left; }

invece di

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

che non è ancora IE6 amichevole, ma sarà galleggiare entrambi DIV bambino.

Answer 4

Io uso la classe 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 */ 

quindi utilizzare semplicemente la classe in ogni contenitore a elementi mobili.

Answer 5

Questo non è un problema di clearfix, il suo problema è che i suoi due flo flottanti non stanno comparendo fianco a fianco.

Prima di tutto, non è necessario impostare la larghezza del div genitore, i div sono elementi di blocco che significa che regolano automaticamente la larghezza per occupare tutta la larghezza del genitore (in questo caso, presumibilmente il genitore di div # parent è il corpo).

Poiché si imposta la larghezza in modo esplicito E dandogli il padding, si può potenzialmente estendere OLTRE il corpo. Questo non ha molta importanza, ma se applichi questa stessa conoscenza al bambino, puoi vedere i motivi per cui quello giusto potrebbe essere scagliato fino in fondo.

Innanzitutto, se si impostano in modo esplicito le larghezze dei div in una percentuale, non è necessario aggiungere il riempimento. Poiché si ha a che fare con larghezze percentuali, è meglio aggiungere padding al contenuto delle div anziché ai div stessi, perché il padding è AGGIUNTO alla larghezza. Pertanto, se hai aggiunto padding 10px a un div che aveva una larghezza del 49% in un genitore di 100 px, avrebbe una larghezza di 49px + 10px + 10px (2 lati) per una larghezza calcolata totale di 69 px.

Dato che non hai inserito il tuo markup e il contenuto o il browser in cui stai effettuando il test, non posso dire esattamente perché il div è stato espulso. Ci sono due possibilità probabili.

1. Si sta utilizzando IE, che consente alle tabelle di estendersi oltre il div principale che causerà la rottura. Prova a impostare in modo esplicito la larghezza della tabella su una percentuale del suo genitore o qualcosa del genere.
2. La larghezza del 49% + padding = maggiore di [larghezza genitore] - [left-div-width]. Questo farà sì che esso venga schiacciato perché il div sinistro e il div destro sono troppo larghi per la larghezza genitore.