CSS - Fix-Fluid-Spalten

In den Körper von meiner Seite, ich bin versucht, erstellen Sie zwei Spalten - eine, auf der rechten Seite mit einer festen Breite (300px) für Werbung etc, und eine auf der linken, die den verbleibenden Platz auf der Seite. Wie kann dies erreicht werden in CSS?

InformationsquelleAutor | 2009-02-24
  1. 7

    CSS :

    .column-right {
    float: left;
    width: 100%;
    height: 200px;
    background-color: red;
}

.column-right .column-content {
    margin-left: 250px;
}

.column-left {
    float: left;
    margin-left: -100%;
    width: 250px;
    height: 200px;
    background-color: green;
}

    HTML :

    <div class="column-right">
    <div class="column-content">
        <strong>Right Column:</strong><em>Liquid</em>
    </div>
</div>
<div class="column-left">
    <strong>Left Column:</strong><em>250px</em>
</div>
    • Dieser arbeitet, im Gegensatz zu den top-Antwort. Die Flüssigkeit und die festen Spalten sind falsch herum, aber ansonsten ist alles gut.
    InformationsquelleAutor Peiniau
  2. 4

    Hier ist ein Werkzeug, um erzeugen Sie örtlich festgelegte Flüssigkeit Spalten für die Platzierung von adsense-anzeigen.

    InformationsquelleAutor unigg
  3. 1

    CSS:

    #right-column{
 width:300px;
 float:right;
}

#other-column{
 float:left;
 width:100%;
 padding-right:20px; /*to prevent text overlap as suggested in the comment*/
}

    In HTML:

    <div id='right-column'>
 <!-- ads here -->
</div>
<div id='other-column'>
 <!-- content here -->
</div>
    • Wollen Sie vielleicht ein padding-right auf der #sonstige-Spalte Erklärung, so dass der text in der anderen Spalte nicht umbrochen wird unter dem text in der rechten Spalte.
    • Dies funktioniert bei mir nicht in firefox oder IE. [code] <div id="content"> </div> <div id="ads"> </div> [/code] [code] #content { float: left; width: 100%; Höhe: 500 Pixel; background: green; } #Werbung { float: right; Höhe: 500 Pixel; width: 200px; background: blue; } [/code]
    • versuchen Sie, das ads-div oberhalb des content-div
    • Möchten Sie vielleicht auch, um einen rechten Rand von 300px auf #sonstige-Spalte, so dass, sobald der andere-Spalte länger wird als die der anzeigen, es füllt nicht den Raum unten, bleibt aber die gleiche Breite.
    • -1 weil diese Antwort scheint nicht funktioniert in Chrome v22.
    • -1 weil das nicht funktioniert in aktuellen Browsern

    InformationsquelleAutor anand.trex
  4. 0

    Vielleicht wollen Sie auch zu prüfen, die YUI: CSS Grid Builder. Es ist ein einfaches web-interface, wo Sie angeben, was grid-layout, die Sie suchen, und Sie wird Sie den html-code, den Sie verwenden können, in Kombination mit der YUI Grids CSS-framework erhalten Ihre gewünschten layout. Eine nette Sache über die YUI Grids CSS-framework ist es gutes cross-browser-Unterstützung das spart Ihnen Zeit bekommen Sie arbeiten in unterschiedlichen Browsern. Sie können auch reverse Engineering den code, den Sie aus dem grid-generator zu get einige Ideen, wie Sie können es auf eigene Faust tun. Die Einstellungen, die Sie verwenden möchten, werden mit dem YUI: CSS Grid Builder, um Ihre gewünschte layout ist wie folgt:

    1. Körper-Größe: 100%
    2. Körper Spalten: Sidebar rechts 300px
    InformationsquelleAutor Blegger
  5. 0

    Einer Lösung, die ich gefunden habe, für diese ist die Schwimmer der rechten Spalte auf der rechten Seite und geben Sie der linken Spalte eine absolute position mit left:0 und right:300px. Dadurch wird es flüssig wie wenn Sie gab es ein width:80%, aber es wird relativ zum übergeordneten container in einer anderen Weise.

    Hier ein Beispiel:
    http://jsfiddle.net/tkane2000/dp9GZ/

    Einer Ausgabe, die Sie vielleicht finden, mit diesem ist, dass, da es absolut, es wird natürlich nicht nach unten drücken, die Elemente darunter.

    Andere mögliche Lösung wäre, geben der linken Spalte
    Breite:100%
    padding-right: 300px;

    und rechts (Feste Breite) Spalte:
    position: absolute:
    top:0;
    right:0;

    Müssen Sie möglicherweise die set-box-sizing:border-box in der linken Spalte.

    Diese auch als einige Einschränkungen. Einem in den Sinn kommt, ist, dass, wenn Sie wollten, dass die linke Spalte eine Grenze-rechts getrennt, die Grenze auf der falschen Seite der rechten Spalte.

    • und noch etwas ist rückwärts Unterstützung für Browser, die keine Unterstützung mit left und right zusammen.
    InformationsquelleAutor tkane2000
Schreibe einen Kommentar