Prima di tutto, quello che stai facendo sembra un tavolo per me, quindi potresti volerlo considerare. Tuttavia, farlo con i CSS è un po 'più complicato (a meno che non si faccia lo stile della tabella nei CSS). Il seguente codice funziona, ma non centrare verticalmente il testo nella casella:
<html><head><title>Test2</title></head><body>
<div style="width:300px; padding: 2px; border: 1px solid black;">
<div style="float:right; width: 100px;">
<div style="border: 1px solid black; margin-bottom: 2px;">
Here is some sample text. And some additional sample text.
</div>
<div style="border: 1px solid black;">
Here is some sample text. And some additional sample text.
</div>
</div>
<div style="border: 1px solid black; margin-right: 102px;">
<div>
This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
</div>
<div style="clear: right; margin-bottom: -1px;"></div>
</div>
</div></body></html>
celle di tabella in CSS sono più facili:
<!DOCTYPE html>
<html><head><title>Test2</title></head><body>
<div style="display: table; width:300px; border: 1px solid black; border-spacing: 2px;">
<div style="display: table-cell; border: 1px solid black; vertical-align: middle;">
This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
</div>
<div style="display: table-cell; width: 100px;">
<div style="border: 1px solid black; margin-bottom: 2px;">
Here is some sample text. And some additional sample text.
</div>
<div style="border: 1px solid black;">
Here is some sample text. And some additional sample text.
</div>
</div>
</div>
</body>
</html>
fonte
2010-04-09 22:50:36
Questo è abbastanza vicino. Ho notato, per il tuo esempio, che quando la colonna di sinistra contiene più testo rispetto alle 2 colonne di destra combinate, le colonne di destra non si espandono automaticamente per assorbire lo spazio extra. Questo comportamento esiste per le tabelle. In ogni caso, apprezzo la tua risposta. –
Hai ragione. Normalmente non è possibile rendere l'altezza del float dipendente da un altro valore. Disegnare le cose come tabella potrebbe essere la soluzione migliore che dovrebbe avere ancora i vantaggi di non usare una tabella html. L'unico problema è che non funziona in IE <8. Potresti voler usare un foglio di stile condizionale per quello (solo supportato in IE) che fa qualcos'altro per IE. –