div-nicht schwebend nebeneinander

<div id="content">
    <div id="outer">
        <div id="header">Transport</div>
        <div id="image">
            <img src="../images/img1.jpg" style="width:300px;height:300px"/>
        </div>
        <div id="right_content">large amount of text</div>
    </div>
</div>

Für die über das css verwendet wird:

#content {
    width: 100%;
    min-height: 600px;
    overflow: hidden;
    border: 1px solid;
    padding: 0;
    margin: 0;
}

#outer {
    border: 1px solid;
    float: left;
    overflow: hidden;
    width: 100%;
    min-height: 200px;
}

#header {
    border: 1px solid;
    width: 100%;
    height: 20px;
    background-color: #006A4D;
    color: #ffffff;
    padding: 10px;
    font: normal 14px Helvetica, Arial, sans-serif;
    line-height: 18px;
    clear: both;
    overflow: auto;
}

#right_content {
    border: 1px solid;
    overflow: hidden;
    min-height: 300px;
    padding: 10px;
    float: left;
    background-color: orange;
    font: normal 12px Helvetica, Arial, sans-serif;
    line-height: 18px;
}

#image {
    border: 1px solid;
    min-width: 300px;
    min-height: 300px;
    padding: 10px;
    float: left;
    overflow: hidden;
}

Sowohl die inneren divs sind float:left. Aber die Ausgabe kommt als ein div unter die andere. Wie kann ich Sie nebeneinander angezeigt werden?

  • es sollten nebeneinander sein, es sei denn, Ihr Fenster ist zu klein für Sie beide Seite an Seite. In dem Fall müssen Sie die beiden äußeren div mit einer festen Breite.
InformationsquelleAutor user544079 | 2011-05-11
  1. 1

    Gab ich #image und #outer eine Breite und eine #right_content eine negative Marge zu berücksichtigen, für die #image's Raum.

    jsFiddle: http://jsfiddle.net/stealthyninja/Hn2Et/

    InformationsquelleAutor stealthyninja
  2. 5

    Funktioniert gut für mich an http://jsfiddle.net/gaby/zv4zG/

    Die Sache im Auge zu behalten ist, dass, wenn Sie nicht geben Sie die entsprechende Breite für die gefloateten Elemente, und Sie wachsen in der Größe, um Platz für Ihre Inhalte, können Sie erreichen eine Größe (wenn Hinzugefügt) über die container-Breite. An diesem Punkt werden Sie brechen, und man wird sich wieder unter die anderen.

    Also, Sie haben, um sicherzustellen, dass Ihre zusätzlichen breiten (und horizontalen Polstern und Margen) nie über Ihre Container-Breite.

    • Ich habe es versucht. Wenn ich fügte hinzu, eine große Menge an text, die divs wurde eine unterhalb der anderen
    • dann machte Sie einige Fehler.. wenn Sie eine Feste Breite für die inneren Elemente, die nicht über Ihre Eltern, es gibt keine Möglichkeit, Sie zu brechen..
    InformationsquelleAutor Gabriele Petrioli
  3. 4

    das äußere div hat 100% Breite, Hexe sagt dem browser, Messe alle verfügbaren Breite, deshalb ist der zweite div-Tropfen unter.

    Die Lösung ist einfach, machen Sie sicher, dass beide divs haben eine ausreichende Breite, um der Lage sein, Seite an Seite.

    • Yep, gibt nur eine wörtliche Breite
    InformationsquelleAutor jackJoe
  4. 3

    Brauchen Sie nicht zu schwimmen, die #right_content haben, fügen Sie nur ein Linker Rand breit genug für die Bild-und drop die overflow:

    #right_content{
    border: 1px solid;
    min-height: 300px;
    padding: 10px;
    margin-left: 322px;
    background-color: orange;
    font: normal 12px Helvetica, Arial, sans-serif; 
    line-height: 18px;
}

    Live-Beispiel: http://jsfiddle.net/ambiguous/8m3LS/

    InformationsquelleAutor mu is too short
  5. 1

    DIVs sind block-level-Elemente, was bedeutet, dass Sie werden stapeln vertikal standardmäßig. In Reihenfolge zu make Sie erscheinen, side-by-side, Sie müssen auch display: inline; in Ihrem CSS.

    UPDATE

    Ich schuf diese jsfiddle und es sieht so aus wie das layout ist in Ordnung... nicht sicher, was das Problem ist. Könnte es sein, browser-spezifisch?

    • Das macht keinen Unterschied. Es scheint noch immer eins unter dem anderen
    • Der OP sagte, dass er schweben Sie auf der linken Seite ..
    InformationsquelleAutor Brian Driscoll
  6. 0

    Als wir geben Breite zu einer der div, verlässt es den zusätzlichen Platz für die nächste div, aber stellen Sie sicher, dass die Breite der beiden divs nicht übersteigt, mit der browser-Breite, ansonsten ist der zweite div wird verschoben unter dem ersten div. das css für mich gearbeitet:

    CSS:

    #left{
display:inline;
width:50%;
float:left;
}
#right{
float:left;
}

    HTML:

    <div id="left">
left div
</div>
<div id="right">
right div
</div>

    • Verbessern Sie die Qualität Ihrer Antwort, Sie sollten erklären, wie es ist, dass Ihr code arbeitete und Ihre nicht. Bitte links zu den Forschungen, die Sie durchgeführt haben, erwiesen sich als nützlich (und relevant). Auch ich empfehle die Einstellung der background-color für jedes div zu so etwas wie yellow für 'a' und blue für 'b' - diese werden leichter zeigen, wo die Grenzen der div's sind im Gegensatz zu einander und die wichtigsten body von der Seite.
    InformationsquelleAutor Ahmad Raza
Schreibe einen Kommentar