Vertikal oben ausrichten 2 Spalte divs unterschiedlicher Höhe mit float:left

Das problem ist, dass ich ein Formular mit verschiedenen Feldern, in verschiedenen Größen. Jedes Feld wird innerhalb eines div mit float:left. Und Sie verteilen automaticlly in 2 Spalten. Wenn Sie alle die gleiche Höhe haben, ist es kein problem, aber wenn nicht, es passiert Folgendes:

Den divs ausgewählt sind blau. Ich brauche, dass der Letzte div-zum Beispiel nach oben geht, denn wenn nicht habe ich ein dead space gibt es in vielen anderen Formen von meine Website. Sie sind dynamische Formen, so frömmle ich, lösen Sie es manuell. Die Platzierung muss automatisch sein. Ich suchte in Stack Overflow und im internet, aber ich konnte nicht finden keine Lösung.

Hier ist die Divs CSS

#popup #form .left{
    float:left;
    margin-left:25px;
    display:inline-block;
    vertical-align:top;
}

Und die Allgemeinen CSS -

#popup{
    width:645px;
    height:auto;
    background-color:#e3e3e3;
    border-style:solid;
    border-width:1px;
    border-radius:5px;
    border-color:#afafaf;
    padding:15px;
    color:#4d4d4d;
}

#popup #titulo{
    font-size:15px;
    font-weight:bold;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#afafaf;
    padding-bottom:10px;
}

#popup #form #input{
    display:block;
    width:289px;
    margin-top:10px;
}

#popup #form .left{
    float:left;
    margin-left:25px;
    display:inline-block;
    vertical-align:top;
}

#popup #form .right{
    float:right;
    margin-right:25px;

}

#popup #form #input label{
    font-size:12px;
    font-weight:bold;
}

#popup #form #input input[type='text'], #popup #form #input select, #popup #form #input textarea{
    font-size:12px;
    border-radius:5px;
    border-style:solid;
    border-width:1px;
    border-color:#afafaf;
    width:280px;
    background-color:#f0f0f0;
}

#popup #form #input #foto{
    width:191px;
    height:87px;
    background-image:url(images/img_background.png);
    border-style:solid;
    border-width:1px;
    border-color:#afafaf;
    border-radius:5px;
}

#popup #form input[type='button']{
    text-align:center;
    border-radius:5px;
    border-style:solid;
    border-width:1px;
    border-color:#afafaf;
    font-size:12px;
    color:#4d4d4d;

    -moz-box-shadow:    inset 1px 1px 1px #ffffff;
    -webkit-box-shadow: inset 1px 1px 1px #ffffff;
    box-shadow:         inset 1px 1px 1px #ffffff;
}

#popup #form #input input[type='button']{
    width:82px;
    height:17px;
    margin-left:4px;
    line-height:14px;
}

#popup #form #submit_buttons{
    text-align:right;
    border-top-style:solid;
    border-top-width:1px;
    border-top-color:#afafaf;
    padding-top:10px;
    margin-top:15px;
}

#popup #form #submit_buttons input[type='button']{
    width:82px;
    height:30px;
}

#popup #form input[type='button']:hover{
    background-color:#cccccc;
    cursor:pointer;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#popup #form #input table{
    width:284px;
    margin-top:2px;
    margin-bottom:5px;
}

#popup #form #input table tr{
    text-align:right;
    vertical-align:top;
}

#datepicker{
    background-image:url(images/datepicker.png);
    background-repeat:no-repeat;
    background-position:right;
}

#popup #form #input textarea{
    height:115px;
    max-height:115px;
    min-height:115px;
    width:275px;
    max-width:275px;
    min-width:275px;
}

Sie gehen zu müssen, um 2 Spalten. Sind Sie bereit, die javascript verwenden, um Sie in die richtige Spalte?
Sie sind dynamische Formen, so dass die beste Sache ist, dass Sie sich automaticlly. Ich weiß wie es zu lösen mit javascript oder php, aber ich habe zur Berechnung der Höhe der einzelnen div - /Eingang mit einem 2-Spalten-layout und einige Mathematik, um festzustellen, wo jedes. Wenn ich es lösen kann mit einfachen css die ideale Sache.
Ich bin mir nicht sicher, ob ich verstehe, warum würden Sie müssen die Mathematik zu tun. Sie müssen nur Durchlaufen, jeder Abschnitt und legen Sie es in abwechselnden Spalten. Wenn Sie sind besorgt über eine Spalte zu groß wird, dann ist das ein komplexeres problem. Wenn Sie hoffen css-Magische Weise zu lösen, die für Sie... es nicht.
Ich denke nicht, aber es wäre toll. Ich habe zu Hause einige Tag css lösen könnte diese Art von Dingen. Es wird ideal sein. Und ja, ich habe Mathematik zu tun, weil ich die divs/Eingänge diferent Größen Höhe. Vorstellen, dass 3 einfache kleine Eingänge in die linke und die anderen drei gigant Eingänge in der rechten, es wird schrecklich sein.
Auch ich hoffe, dass es ein plugin irgendwo, das dies tut, oder etwas ähnliches. Wenn es nicht ich werde se wenn ich es tun kann, es zu teilen, um die Welt. Sicherlich bin ich nicht der einzige, der Kopfschmerzen hat, mit diesem.
Überprüfen Sie diese Lösung: stackoverflow.com/questions/11414674/...

InformationsquelleAutor Jonathan Calb | 2012-09-12

Ich bin mit einer vereinfachten version des Problems, aber ist einfach genug, um auf dein Beispiel. Sie müssen nur die Alternative der Schwimmer zwischen Links und rechts, damit Sie nicht brechen 🙂

HTML-Code:

<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize2"></div>
<div class="box boxSize3"></div>

CSS-Code:

.box {float:left; width:48%; height:40px; background:red; margin:0 1% 2%;}
.box:nth-child(even){float:right;}
.boxSize2 {height:80px; background:green;}
.boxSize3 {height:120px; background:blue;}

Live-Beispiel:
http://jsfiddle.net/h4kE8/

InformationsquelleAutor ignacioricci

0

Ich würde versuchen Sie werfen einen position:relative; mit denen zwei DIVs. Ich habe festgestellt, dass jede Art von Positionierung problem kann meist behoben werden, indem eine klare position-Attribut.

Hilft auch bei der Verwendung von position:absolute; seiner übergeordneten position eingestellt. Wenn das nicht funktioniert, sind nicht zu unterschätzen Tabellen. Menschen mögen nicht, wie Sie viel, aber wenn Sie wissen, wie Sie zu benutzen, Sie funktionieren gut für Sachen wie diese.

Langwierig, aber der beste Rat, den ich geben kann.

InformationsquelleAutor CDizzle
0

Multi-column Layout module spec hat schon für eine lange Zeit, aber Browser haben zu langsam, zu implementieren, also IE ist fast definitiv aus (obwohl es ein polyfill, dass helfen wird, es schlaff zusammen).

http://www.quirksmode.org/css/multicolumn.html

http://www.opera.com/docs/specs/presto28/css/multicolumnlayout/

Beachten Sie, dass das ändern der Reihenfolge, in der Elemente angezeigt, aber es beseitigt die Lücke.

InformationsquelleAutor cimmanon
0

Ich würde in deinem Fall die id, nombre und descripcion sitzen im selben div, nennen Sie es, Links div. Dann haben Sie den rest des Inhalts auf der rechten Seite sitzen, auf einem anderen div-nennen Sie es Rechte div und haben Sie beide float left. wie folgt

css
```
.left { 
  float:left;
}
.right {
 float:left;
}
```
HTML
```
<div id="left">
/*id, nombre and descripcion */
</div>

<div id="right">
/* the rest */
</div>
```
InformationsquelleAutor Kennedy Nyaga

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.