Sie benötigen generic div css, die nicht überlappt (wie eine Tabelle)

Question

Ich versuche divs statt Tabellen Stil Boxen um meine Inhalte zu verwenden. Der Inhalt kann eine beliebige Größe und muss der Browser ermöglichen zu sein, zu einem gewissen Grad der Größe verändert . Benötigen Sie die Hintergrundfarbe und Grenze zu enthalten den Inhalt . Dies funktioniert gut mit Tischen. Wie erhalte ich ein div auf die gleiche Weise zu arbeiten?

. Hinweis: Ich habe "_" s, weil meine nicht-breaking Speicherplatz wurden verloren

Beispiel-Seite

Beispielbild

_{(Quelle: c3o.com )}

Inhalt:

<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

Es gibt keine einfache Möglichkeit, dies zu tun, die cross freundlich ist, die ich kenne.

Mindestens in Firefox können Sie eine simulierte Tabelle erstellen, indem Sie divs mit

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

Damit diese divs wie Tabellenelemente arbeiten. Dann wird die Box enthält es Inhalt ist. Ob das eine gute Lösung ist oder nicht, ist strittig.

Ich habe mit ähnlichen Problemen mit Seitenlayouts selbst. Normalerweise habe ich gelöst, indem diejenigen min-width und Überlauf: auto;

Answer 2

Wenn Sie wirklich nicht wollen, um eine Tabelle verwenden, dies zu tun:

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

Die nächste Mal diese Art von Problem gehen kommt zu giveupandusetables.com .

Answer 3

Eine Möglichkeit ist, Ihre Boxen schwebt zu machen. In float: left; , Box-Header und Kastenkörper boxen. In clear: both; In den Kastenkörper es unter Box-Header zu erzwingen. Sie werden wahrscheinlich klar Eigenschaft zu, was Inhalt folgt auch hinzufügen müssen.

Sie werden nicht der rechte Rand der Box-header und Kastenkörper auszurichten bekommen, though. Wenn Sie ihre Breiten wollen gleich sein, wollen Sie wirklich einen Tisch. Tabelle ist ein Werkzeug, um alle Zellen in der gleichen Spalte zu machen, die Breiten zu teilen.

Für weitere Ideen Besuche diese Frage SO .

Answer 4

Zunächst sollten Sie semantisches Markup werden. Wenn etwas ist ein Header und Inhalt Zeichen als solche nach oben mit Kopf und Absatz-Tags. Das wird Ihnen helfen aus dem ‚Tisch-Weg‘ bewegen Denk waren Sie versuchen, Ihr Markup und Stile wie eine Tabelle zu emulieren, sollten Markup kommen zuerst, können CSS kommen nach.

Im Folgenden soll das tun, was Sie wollen:

<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>

Das Nachdenken über Markup und Stil separat ist der Pfad zur CSS Zen Mastery: o)

Answer 5

Das funktioniert (eigentlich zusammenhält besser als Tabellen in IE7 auch)

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;
}   

Hinweis: beide Boxen haben gleiche linke und rechte Polsterung haben oder ein etwas ragt

.

Answer 6

Floats sind nicht erforderlich, aber Sie scheinen die Nutzung der Marge vs. Polsterung zu verwirrend. Folgende kleinere Verbesserungen zu Ihrem Stil funktioniert, wie Sie brauchen es an:

<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>

Ich habe die Polsterung an der Box auf eine Marge geändert, verschoben, die Grenze zu Ihrer Box und fügte einen Unterstrich in den Header.

Answer 7

hatte ich dieses Problem Firefox 6.0.1, Opera auch 10.62, Safari 5.1, aber nicht in IE 9, und der Überlauf mit: Auto repariert es in allen Browsern. Nichts anderes tat. Ich habe auch versucht, Überlauf. Enthalten, die auch das Problem behoben, aber es scheint, dass enthalten kein gültiger Wert für Überlauf ist, so gehe ich davon aus, dass, da der Wert nicht gültig war, Auto ersetzt wurde