Ein sauberes CSS3 3-Spalten-Layout, wo soll ich anfangen?

Question

Ich aktualisiere gerade eine ziemlich alte Website (letztes Update war um 2001), und habe zugestimmt, HTML5 und CSS3 zu verwenden.

Für das allgemeine Design arbeite ich an einem sehr sauberen weißen und grauen Tönen Stil, mit vielen Polsterungen und Rändern. Mein Problem liegt auf der Homepage: Ich hätte gerne ein 3-Spalten zentriertes Layout. Aber wo soll ich anfangen? Ich habe versucht, etwas zu treiben, aber vergebens.

Mache ich das richtig?

HTML:

<div class="colwrapper"> 
    <div class="ltcol"></div> 
    <div class="ctcol"></div> 
    <div class="rtcol"></div> 
</div> 

CSS:

.colwrapper { width:1020px; } 
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; } 
.ltcol { float:left; } 
.ctcol { margin-left:340px; } 
.rtcol { float:right; } 

Answer 1

Ihre css so sein sollte:

.ltcol, .ctcol { float:left; } 
.rtcol { float:right; } 

Der Zweck der CSS Eigenschaft float ist, allgemein gesprochen, um ein Block-Level-Element nach links oder rechts zu schieben und es aus t herauszunehmen er fließt im Verhältnis zu anderen Blockelementen. Dies ermöglicht, dass sich natürlich fließender Inhalt um das flotierte Element herum wickelt. Dieses Konzept ähnelt dem, was Sie täglich in der Druckliteratur sehen, wo Fotos und andere grafische Elemente auf einer Seite ausgerichtet sind, während andere Inhalte (normalerweise Text) natürlich um das links- oder rechtsbündig ausgerichtete Element fließen.

Weitere Details Sie diese intresting article zu lesen haben.

Siehe auch Diese Demo: http://jsfiddle.net/akhurshid/YRWLV/

Answer 2

nur versuchen, das rtcol div beofre le LtCol div setzen.

<div class="colwrapper"> 
    <div class="rtcol">X</div> 
    <div class="ltcol">X</div> 
    <div class="ctcol">X</div> 
    </div>​ 

http://jsfiddle.net/EDjpy/

Answer 3

Ihre HTML ist sehr sauber - das ein großer Schritt vorwärts ist.

Sie müssen allen Spalten einen float: left hinzufügen. Um sicherzustellen, dass der Float nach Ihren Spalten aufgehoben wird, fügen Sie am besten ein clear div nach den floated-Spalten hinzu.

HTML:

<div class="colwrapper"> 
    <div class="ltcol">Column 1</div> 
    <div class="ctcol">Column 2</div> 
    <div class="rtcol">Column 3</div> 
    <div class="clear"></div> 
</div>​​​​​​​​​​​​​​​​​ 

CSS:

.colwrapper { width:1020px; } 
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; background-color: #efefef } 
.ltcol { float:left; } 
.ctcol { float:left; } 
.rtcol { float:left; } 
.clear { clear: left; } 

Answer 4

So fügen Sie css3 Tag für diesen questio so empfehle ich Ihnen dieses Layout mit css3 Spalte zu machen:

More info

zum Beispiel

HTML

<div class="colwrapper"> 
    <div>text</div> 
</div> 

CSS

.colwrapper div 
{ 
    -moz-column-count:3; /* Firefox */ 
    -webkit-column-count:3; /* Safari and Chrome */ 
    column-count:3; 
} 

Es ist nicht auf IE nicht funktioniert.

Answer 5

Verwenden Sie eine dieser bewährten Implementierungen, anstatt eine eigene zu implementieren. Zusätzlich zur Tatsache, dass Sie getesteten und funktionierenden Code erhalten, fügen Sie Ihrer Website mit nahezu null Aufwand Reaktionsfähigkeit hinzu.

• http://cssgrid.net/
• http://960.gs/
• http://framelessgrid.com/
• http://goldengridsystem.com/

und vieles mehr, wenn Sie google ..

Answer 6

auch Flexbox Eigenschaft für das jetzt auch so Sie nutzen könnten don Mach dir keine Sorgen über Floats oder Clearfix's.

main{ 
    /* .colwrapper{ */ 
    display: flex; 
    flex-flow: row; 
    justify-content: center; 
    } 
    main > section{ 
    /* .ltcol,.ctcol,.rtcol{ */ 
    display:flex; 
    flex-flow:column; 
    align-items:center; 
    padding:10px; padding:.625rem; 
    } 

    main > section:nth-child(2){ 
    /* .ctcol{ */ 
    margin:0 20px; margin:0 1.25rem; 
    } 

http://caniuse.com/flexbox zeigt die Unterstützung für sie nicht ganz so weit ist, wie Sie wahrscheinlich, jedoch mögen, gibt es Möglichkeiten, durch Mischen von alten Versionen der Syntax mit den neuen http://css-tricks.com/using-flexbox/ hat eine große Schreibunterstützung zu verbessern up darauf von Chris Coyier, wenn du damit für ein nächstes Projekt spielen willst (dieser Beitrag ist ziemlich alt). Sie können auch weitere Informationen bei http://html5please.com/#flexbox

auch erhalten, wenn Sie HTML5 verwenden ich wahrscheinlich mit Abschnitten über divs für eine semantische Struktur, so dass ein Vergleich würde wie folgt aussehen würde gehen:

<main> 
    <section></section><!-- or <nav></nav> --> 
    <section></section><!-- or <article></article> --> 
    <section></section><!-- or <aside></aside> --> 
</main> 

instead of... 

<div class="colwrapper"> 
    <div class="ltcol"></div> 
    <div class="ctcol"></div> 
    <div class="rtcol"></div> 
</div>