it-swarm.com.de

DIV-Layoutdynamik mit drei Spalten; links = fest, Mitte = flüssig, rechts = flüssig

Die beste Lösung, die ich bisher gefunden habe, war:

http://jsfiddle.net/kizu/UUzE9/

Das war aber nicht ganz so. Sie sehen, ich habe drei Spalten. zwei davon müssen eine explizite Größe vermeiden. Nun, der zweite muss dimensioniert sein; aber nicht ganz. 

Gestatten Sie mir zu klären, indem Sie die Bedingungen festlegen, die ich zu erfüllen versuche. 

  • Alle drei Säulen haben eine feste Höhe: 65px, um genau zu sein. 
  • Die Breite der ersten Spalte ist auf 285 Pixel festgelegt. 
  • Die mittlere Spalte hat keine definierte Größe. es nimmt einfach den verbleibenden Platz ein.
  • Die rechte Spalte wird an den Inhalt angepasst. Es ist keine explizite Größe festgelegt, sondern die Größe wird einfach basierend auf dem Inhalt geändert, sodass die mittlere Spalte den verbleibenden Platz belegt. 
  • Es gibt keine Leerzeichen über, unter und zwischen den einzelnen Spalten. 

Das Endergebnis würde ungefähr so ​​aussehen:

 Logo | Spieler | Name     
---------------------------------------------- -------

Für Tabellen hätte ich das einfach gemacht:

<table width="100%" height="65px" cellspacing=0 cellpadding=0>
    <tr>
        <td width="285px" height="65px">
            Logo
        </td>
        <td height="65px">
            Player
        </td>
        <td width="1px" height="65px">
            Account
        </td>
    </tr>
</table>

Ergebnis des obigen Tabellencodes: http://jsfiddle.net/zMNYb/

Aber ich versuche mich von der Verwendung von Tabellen und einem DIV-basierten Layout zu entfernen. Irgendwelche Ideen?

19
Don Cullen

Sie können dies tun, indem Sie float:left für die erste Spalte, float:right für die letzte Spalte und die mittlere Spalte float:none verwenden.

Aktualisierte Demo: http://jsfiddle.net/L85rp/3/

HTML

<div class="col1">Column1</div>
<div class="col3">Column3</div>
<div class="col2">Column2</div>

CSS

.col1 {
    background-color: #ddf;
    float: left;
}
.col2 {
    background-color: #dfd;
    float: none;
}
.col3 {
    background-color: #fdd;
    float: right;
}

NOTE: Sie müssen Ihre rechte Spalte vor Ihrer mittleren Spalte in HTML platzieren (siehe oben, col3 steht vor col2 im HTML-Code), um sicherzustellen, dass der Browser die mittlere Spalte darstellt, wenn er den Browser darstellt Rendern Sie die vorhandenen Floating-Elemente korrekt.


Aktualisiertes CSS

.col1 {
    background-color: #ddf;
    float: left;
    width: 285px;
    height: 65px;
}
.col2 {
    background-color: green;
    float: none;
    height: 65px;
    overflow: hidden;
    display: table-cell; /* turn this off to lock height at 65px */
}
.col3 {
    background-color: cyan;
    float: right;
    height: 65px;
}

Aktualisierte Demo: http://jsfiddle.net/ew65G/1/

27
techfoobar

Dies kann auch durch ein verschachteltes Div-Konzept erreicht werden. Sie müssen lediglich den gewünschten div-Abschnitt in 3 Spalten unterteilen

<div id="main">
    <div id="column-1"></div>
    <div id="column-2">
        <div id="column-2-1"></div>
        <div id="column-2-2"></div>
    </div>
</div>

Gehen Sie durch So erstellen Sie ein 3-Spalten-Layout mit css div , um mehr darüber zu erfahren.

0
Manoj Kumar
<div style="float:left; width:33%">Column1</div>
<div style="float:left; width:33%">Column2</div>
<div style="float:right; width:33%">Column3</div>

Sie können width% nach Bedarf anpassen.

0
Charles Matanda

Sie müssen auch "display: inline;" als div wird normalerweise in Blockform angezeigt. Ohne Inline wird es als drei Zeilen und nicht als drei Spalten angezeigt. 

0
Harry Fairbanks