Brauchen generischen div-css, die sich nicht überlappen (wie eine Tabelle)

Ich versuche, divs statt Tabellen, Stil-Boxen, um meine Inhalte. Der Inhalt kann jeder Größe und muss zulassen, dass der browser zu angepasst, um jeden Grad. Müssen die Hintergrundfarbe und die Grenze zu enthalten den Inhalt. Dies funktioniert gut mit Tabellen. Wie bekomme ich ein div auf die gleiche Weise funktionieren?

Hinweis: ich fügte hinzu, "_"s, weil meine non-breaking spaces wurden verloren.

Beispiel-Seite

Beispiel-Bild

Brauchen generischen div-css, die sich nicht überlappen (wie eine Tabelle)

_{(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>

Ich kann Sie nicht sehen, überlappende Sie auf die gleiche Weise arbeiten, was ist hier das problem?
Ich sehe keine Probleme. IE6 und FF2) zeigen beide das gleiche Verhalten -- es richtig arbeitet.
Sorry, ich versuche upload mein Bild...scheint nicht zu sein, es zu machen. Werfen Sie einen Blick auf: c3o.com/div-like-table.JPG
Ändern Sie die Größe Ihres browser-Weg nach unten (IE oder Firefox) die Tabelle enthält aber divs nicht.
Ich erhöhte das Polster auf 1000, so dass Sie leicht sehen können überlappen
Die links sind jetzt tot, macht die Frage unklar.

InformationsquelleAutor fcs | 2009-04-06

2

Es gibt keinen einfachen Weg, das zu tun, ist crossbrowser freundlich, dass ich kenne.

Zumindest in firefox können Sie eine simulierte Tabelle Einstellung divs mit
```
display:table;
display:table-row;
display:table-cell;
```
So, dass diese divs arbeiten wie Tabellen-Elemente. Dann wird die box enthalten, es ist Inhalt. Ob das eine gute Lösung ist oder nicht, ist fraglich.

Habe ich ähnliche Probleme mit Seitenlayouts mich. In der Regel hab ich gelöst, die durch die Einstellung min-width und overflow:auto;
- Ich wünschte, es war ein overflow:enthalten; in css.
- Danke. overflow:enthalten ist genau das, was ich brauche. Dann kann ich halt mit Tabellen.
- AFAIK gibt es keinen solchen Wert wie overflow: enthalten w3schools.com/Css/pr_pos_overflow.asp
- Gibt es keinen solchen Wert, das ist, warum ich sagte, dass ich wünschte, es war.
- display:table ist keine realistische option, bis es unterstützt wird von IE
- Rory, Sie sind richtig. Deshalb ist mein Erster Satz gesagt, dass es keine einfache crossbrowser Weg
- "Dann kann ich auch aufhören mit Tabellen" vor einiger Zeit in der Zukunft...:)
- Sieht aus wie Sie hatten von Anfang an korrekt. "Es gibt keinen einfachen Weg, dies zu tun". Ich gehe zurück zu Tabellen für diese. Danke.
InformationsquelleAutor Mikko Tapionlinna
2

Wenn Sie wirklich nicht wollen, um eine Tabelle zu verwenden, die Sie dies tun können:
```
div.box div {
  overflow: hidden;
  zoom: 1; /* trigger haslayout for ie */
}
```
Nächsten Zeit diese Art von problem kommt gehen giveupandusetables.com.
- Netter link. Ich bin überrascht, wie schwer das gewesen ist. Scheint wie eine einfache Sache: "ein container, der immer der Inhalt enthält".
- Es wird sehr basic.
- meine Antwort ist giveupandusetables.com
InformationsquelleAutor Kristof Neirynck
0

Einen Weg, um Ihre Boxen schwebt. Add float:left; box, box-header und box-Körper. Add clear:both; Feld-Körper zu zwingen, es unten box-header. Sie werden wahrscheinlich brauchen, um hinzuzufügen, clear-Eigenschaft auf, was Inhalte, die folgt auch.

Werden Sie nicht erhalten die rechten Kanten der box-header und box-Körper zu richten, obwohl. Wenn Sie wollen, dass Ihre Breite die gleichen sind, die Sie wirklich wollen, eine Tabelle. Tabelle ist ein tool, um alle Zellen in der gleichen Spalte teilen der breiten.

Für andere Ideen, check-out diese Frage ALSO.
- Danke. Ich möchte die Breite gleich sein. Klingt wie muss ich Tabellen verwenden.
InformationsquelleAutor buti-oxa
0

Erstens, sollten Sie die Verwendung von semantischem markup. Wenn etwas einen header und Inhalt zu markieren als solche mit Kopf-und Absatz-tags. Das wird Ihnen helfen, den Schritt aus der 'Tabelle-way" - denken waren, die Sie versuchen zu emulieren, markup und styles wie eine Tabelle, markup sollte an Erster Stelle stehen, kann mit CSS nach kommen.

Sollte Folgendes 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>
```
Denken über markup und style getrennt ist, ist der Pfad zu den CSS-Zen-Meisterschaft :o)
- Danke, aber dies noch ermöglicht, überschneidungen. Schön, aber verfehlt den Punkt der Frage.
- Bitte erklären, was du meinst mit 'überschneidungen' gibt, dann klappte das bei mir im FF3.
- Ich habe ein paar non-breaking-spaces zu machen, mehr offensichtlich. Überprüfen Sie heraus dieses Bild mit firefox: c3o.com/overlap1.jpg. Ich brauche nur ein container, der sich nicht überlappen (wie eine Tabelle).
InformationsquelleAutor roryf
0

Das funktioniert (tatsächlich hält besser zusammen als Tabellen im 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 Links und rechts Polsterung oder einer ragt ein wenig.
- Funktioniert Super im IE aber nicht so gut in Firtefox oder chrome.
- Getestet habe ich es in Firefox und es war in Ordnung für mich
- Gerade nochmal getestet, dieses mal in chrome und safari auch. Sie sicher, dass Sie kopiert den code korrekt? coz, das es definitiv funktioniert.
- Die container sollten nicht überlappen UND die Größe mit der Seite. Wenn ich nach oben ziehen in firefox gelöst, die überschneiden sich aber nicht ändern. Ich habe ein Beispiel hier: c3o.com/wheresrhys.htm
- Passt Prima im IE
- Gut, dass ist einfach nur seltsam. Hier ist eine Testseite, die ich getan habe, die funktioniert: wheresrhys.co.uk/resources/test.html. Es muss eine winzige unspottable Unterschied zwischen dem, was wir haben.
- Ich denke, dein doc geben ist sagen, firefox zu verwenden quirks Modus, der macht es arbeiten. Ist der quirks-Modus schlecht? Ich werde meinen doc geben und sehen, ob ich das an Arbeit im wirklichen Leben.
- Guter Punkt. Ich habe jetzt die geänderten doctype... ... und es funktioniert immer noch. Ich habe bemerkt, eine große differehce mit Ihrer Kopie aber: Sie haben margin 10px an allen Seiten der box, in der Erwägung, dass habe ich 1000px auf der einen Seite
- nun bricht es in ie7 - na gut, ich gebe auf
InformationsquelleAutor wheresrhys
0

Schwimmer sind nicht erforderlich, aber Sie scheinen verwirrend sein, die Verwendungen von Marge vs. Polsterung. Die folgenden geringfügigen änderungen an Ihrem Stil arbeitet, wie Sie es brauchen:
```
<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 geändert habe, ist die Polsterung auf der box, die einen Rand, zog die Grenze zu Ihrer box, und fügte hinzu, eine Unterstreichung der Kopfzeile.
- Ich wahrscheinlich bin Durcheinander Polsterung und Margen, sondern Sie Lösung hat immer noch die gleiche überlappen. Führen Sie es einfach mit einem nicht-quirks-Modus doc-type.
- Ich missverstanden, das problem. Ich schau später nochmal - nur IE auf Arbeit.
InformationsquelleAutor Traingamer
0

Ich hatte dieses problem auch mit Firefox 6.0.1, Opera 10.62, Safari 5.1, aber nicht im IE 9, und das overflow:auto fixiert es in allen Browsern. Nichts anderes hat. Ich habe auch versucht overflow:enthalten, die auch das problem behoben, aber es scheint, dass enthalten ist kein Gültiger Wert für overflow, also gehe ich davon aus, dass, da war der Wert nicht gültig, auto ersetzt wurde.

InformationsquelleAutor Bruce Patin

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.