CSS Positionierung von divs

Ich bin immer schwach, wenn es um die Positionierung von divs, aber diese situation ist etwas schwierig, eine Lösung zu finden online. Ich versuche, die position der Boxen in etwa so:

 _  ___  _ 
|_||   ||_|
 _ |   |
|_||___|

Gibt es eine Möglichkeit zu vermeiden, definieren der einzelnen ein-pixel-Positionen, die speziell und machen Sie slot in den drei Spalten ich habe?

  • Kannst du mehr Kontext? Was Spalten? Sind diese divs Feste Breite? Ist das unten Links div sein soll, unter der linken oberen div oder im Einklang mit der Unterseite der mittleren div?
  • Im Grunde genommen habe ich keine Ahnung, was Sie eigentlich wollen. Ihre aktuelle HTML/CSS-Code würde helfen.
  • Durch die Spalten, die ich meine, die Boxen passen sich in drei vertikale Spalten, die erste mit zwei in ihm. Es gibt eine Feste Breite. Die untere linke div soll einfach unter die anderen. Mein code für jedes Feld ohne Positionierung ist: #box { background: #FFFFFF; width: 175px; height: 300px; padding: 5px; border: 1px solid #b3b3b3; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
InformationsquelleAutor Sebastian | 2011-05-28
  1. 4

    werfen Sie einen Blick auf diese Geige: http://jsfiddle.net/rREAh/ ist es das, was du suchst?

    Wenn Sie brauchen, ein perfektes layout, werfen Sie einen Blick auf die yahoo-layout-manager: http://developer.yahoo.com/yui/layout/

    • Was ich möchte ist das (Umgekehrt, sorry mein Fehler): jsfiddle.net/rREAh, aber mit der top-und bottom-boxes nicht durch eine Lücke getrennt, nur eine kleine Marge, die ich angeben.
    • also mehr so etwas wie dieses: jsfiddle.net/rREAh/1 ? Sie können ganz einfach ändern Sie die Marge durch die margin-top css-Stil
    • Vielen Dank für Eure Hilfe!
    InformationsquelleAutor rdmueller
  2. 5

    Definieren Sie drei Container für jede Spalte, und schweben Sie auf der linken Seite:

    <div style="float:left;width:Xpx"></div>
<div style="float:left;width:Ypx"></div>
<div style="float:left;width:Zpx"></div>

    Jetzt können Sie alle Ihre Behälter an geeigneten stellen in diesen Spalten.

    InformationsquelleAutor Headshota
  3. 3

    Finden Sie unter: http://jsfiddle.net/qXwKT/

    CSS:

    .box {
    background: #ffffff;
    padding: 5px;
    border: 1px solid #b3b3b3;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#container {
    margin: 0 auto;
    width: 400px;
    background: #ccc;
    overflow: hidden
}
#left, #right {
    float: left;
    width: 75px;
}
#mid {
    float: left;
    width: 250px;
}
#mid .box {
    margin: 0 10px;
    border-color: red
}
#left .box {
    margin: 0 0 10px 0;
    border-color: blue
}

    HTML:

    <div id="container">
    <div id="left">
        <div class="box">left 1</div>
        <div class="box">left 2</div>
    </div>
    <div id="mid"><div class="box">mid</div></div>
    <div id="right"><div class="box">right</div></div>
</div>
    • Definitiv der beste Weg, um dies zu implementieren. Konnte nicht mehr Zustimmen, dass eine box Klasse macht dies so viel einfacher.
    InformationsquelleAutor thirtydot
  4. 1

    Werfen Sie auch einen Blick auf diese ein: jsfiddle-Beispiel die mit einem fluid-layout.

    Und ein weiteres ohne festen div im bottomleft Ecke.

    • Ich bin mir nicht sicher, warum Sie mit position: fixed an alle...
    • Das war meine erste interpretation von OP ' s Frage. Später in seinem Kommentar erklärt er seinen Wunsch, mehr im detail, aber ich fand es nicht notwendig zu ändern, meine Geige, denn es gibt genug Beispiele jetzt schon. Neben dieser vielleicht etwas zusätzliche inspiration für Sebastian.
    • Vielen Dank für Ihre Hilfe!
    InformationsquelleAutor NGLN
Schreibe einen Kommentar