8
Ho due colonne affiancate che sono colori diversi. Lo sfondo ha anche un colore unico. La colonna di destra contiene del testo che si espanderà a un'altezza sconosciuta. L'altra colonna contiene poco o nulla.Alternativa CSS a questo codice CSS-jQuery?
<div id="container">
<div id="leftColumn">
<p>Only one small paragraph here</p>
</div>
<div id="rightColumn">
<p>Many large paragraphs inside here.</p>
</div>
</div>
Vorrei che la colonna di sinistra fosse l'altezza esatta della colonna di destra.
Ecco il CSS ...
#leftColumn {
display:inline-block;
width: 200px;
}
#rightColumn {
display:inline-block;
width: 600px;
vertical-align: top;
}
Così, quando la pagina viene caricata ho utilizzare jQuery per impostare l'altezza della colonna di sinistra in base all'altezza della colonna di destra.
$(document).ready(function() {
$('#leftColumn').css('height', $('#rightColumn').innerHeight());
});
C'è un modo per farlo con solo CSS?
CSS non può essere l'unico strumento per il lavoro quando altri strumenti si prestano meglio un problema em. Le tabelle HTML non sono malvagie; anche se in passato potevano essere stati abusati prima del buon supporto CSS, le tabelle hanno ancora il loro posto.Quando parli di altezze uguali, le tabelle lo hanno automaticamente e possono essere controllate tramite CSS, per una soluzione ibrida che utilizza il meglio dei due mondi. Altrimenti può diventare complicato velocemente se si usa uno strumento per escludere gli altri per il gusto di farlo. –
Poi di nuovo l'autore ha chiesto una soluzione solo CSS, quindi forse il tentativo di rafforzare i nostri ideali con l'esclusione di rispondere direttamente alla domanda sta lavorando contro il processo. –