Ho bisogno di div css generico che non si sovrapponga (come un tavolo)

Question

Sto provando a usare divs invece di tabelle per disegnare scatole attorno al mio contenuto. Il contenuto può essere qualsiasi dimensione e deve consentire al browser di essere ridimensionato a qualsiasi livello. È necessario il colore di sfondo e il bordo su contenere il contenuto. Funziona bene con le tabelle. Come faccio a far div a lavorare allo stesso modo?

Nota: ho aggiunto "_" s perché i miei spazi non interrotti si stavano perdendo.

Sample Page

Sample image

alt text http://www.c3o.com/div-like-table.JPG

Content:

<style type="text/css"> 
    div.box, table.box 
    { 
     padding: 10px 1000px 10px 10px; 
    } 

    div.box-header, td.box-header 
    { 
     border: solid 1px #BBBBBB ; 
     font-size: larger; 
     padding: 4px; 
     background-color: #DDDDDD; 
    } 

    div.box-body, td.box-body 
    { 
     padding: 6px; 
     border: solid 1px #BBBBBB ; 
     border-top: none; 
    } 
</style> 


<div class="box"> 
    <div class="box-header">please_help_make_these_divs_stop_overlapping</div> 
    <div class="box-body">please_help_make_these_divs_stop_overlapping</div> 
</div> 

<table class="box" width="100%" cellpadding="0" cellspacing="0"> 
    <tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr> 
    <tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr> 
</table> 

Answer 1

Non c'è un modo semplice per farlo è che crossbrowser amichevole che io sappia.

Almeno in Firefox è possibile creare una tabella simulato da div impostazione con

display:table; 
display:table-row; 
display:table-cell; 

In modo che questi div funzionano come elementi di una tabella. Quindi la scatola conterrà il suo contenuto. Che sia una buona soluzione o no è discutibile.

Ho riscontrato problemi simili con i layout di pagina. Di solito ho risolto quelli impostando min-width e overflow: auto;

Answer 2

Un modo è far galleggiare le tue scatole. Aggiungi float: a sinistra; per boxare, box-header e box-body. Aggiungi chiaro: entrambi; per box-body per forzarlo sotto box-header. Probabilmente dovrai aggiungere proprietà chiare a qualsiasi contenuto che segua.

Tuttavia, non si otterranno i bordi destro dell'intestazione della scatola e del corpo della scatola per l'allineamento. Se vuoi che le loro larghezze siano le stesse, vuoi davvero un tavolo. Table è uno strumento per rendere tutte le celle nella stessa colonna per condividere le larghezze.

Per altre idee, consultare this SO question.

Answer 3

Questo funziona (in realtà tiene insieme meglio di tavoli in IE7 troppo)

div.box{ 
    float:left; 
    width:auto; 
    margin: 10px 1000px 10px 10px; 
} 

div.box-header{ 
    float:left; 
    width:100%; 
    border: solid 1px #BBBBBB ; 
    font-size: larger; 
    padding: 4px; 
    background-color: #DDDDDD; 
} 

div.box-body{ 
    clear:left; 
    float:left; 
    width:100%; 
    padding: 4px; 
    border: solid 1px #BBBBBB ; 
    border-top: none; 
} 

NOTA: entrambe le caselle devono avere stessa padding destro e sinistro o uno si protende un po '.

Answer 4

In primo luogo, si dovrebbe usare la marcatura semantica. Se qualcosa è un'intestazione e il contenuto lo contrassegna come tale con tag di intestazione e di paragrafo. Ciò ti aiuterà a uscire dal "modo di pensare" del tavolo, se provassi ad emulare il tuo markup e gli stili come un tavolo, il markup dovrebbe venire prima, i CSS possono venire dopo.

Il seguente dovrebbe fare quello che vuoi:

<style type="text/css"> 
    * { 
    margin:0px; 
    padding:0px; 
    } 
.box { 
border: solid 1px #BBBBBB; 
margin:10px; 
} 
.box h3 { 
padding: 4px; 
border-bottom: solid 1px #BBBBBB; 
background-color: #DDDDDD; 
} 
.box p { 
padding: 6px; 
} 
</style> 

<div class='box'> 
    <h3>please help make these divs stop overlapping</h3> 
    <p>please help make these divs stop overlapping</p> 
</div> 

Pensando markup e lo stile a parte è il percorso CSS Zen Mastery: o)

Answer 5

galleggianti non sono necessari, ma ti sembra di essere fonte di confusione gli usi del margine rispetto al padding.Le seguenti modifiche minori al vostro stile funziona come avete bisogno di:

<style type="text/css"> 
    div.box, table.box 
    { 
     margin: 10px 1000px 10px 10px; 
     border: solid 1px #BBBBBB ; 
     padding: 0px; 
    } 

    div.box-header, td.box-header 
    { 

     font-size: larger; 
     padding: 4px; 
     background-color: #DDDDDD; 
    border-bottom: solid 1px #BBBBBB ; 

    } 

    .box-body, td.box-body 
    { 
     padding: 6px; 
    } 
</style> 

ho cambiato l'imbottitura sulla scatola di un margine, si è trasferito al confine con la tua casella, e ha aggiunto una sottolineatura per l'intestazione.

Answer 6

Se davvero non si vuole utilizzare una tabella si può fare questo:

div.box div { 
    overflow: hidden; 
    zoom: 1; /* trigger haslayout for ie */ 
} 

La prossima volta che questo tipo di problema viene fino andare a giveupandusetables.com.

Answer 7

Ho avuto questo problema anche utilizzando Firefox 6.0.1, Opera 10.62, Safari 5.1, ma non in IE 9 e l'overflow: l'ho risolto automaticamente in tutti i browser. Nient'altro ha fatto. Ho anche provato un overflow: contenere, che ha anche risolto il problema, ma sembra che contenere non sia un valore valido per l'overflow, quindi suppongo che, poiché il valore non era valido, l'auto è stata sostituita.