Beste Möglichkeit, Spalten in HTML/CSS zu tun

Ich bin auf der Suche nach einer Möglichkeit, 3 Spalten Inhalt anzuzeigen. Ich habe eine Möglichkeit gefunden, Wrap-Around-Spalten anzuzeigen, aber das möchte ich für diese Seite nicht. Ich bin auf der Suche nach einer Möglichkeit zu sagenBeste Möglichkeit, Spalten in HTML/CSS zu tun

<column> 
<!-- content --> 
</column>

3 mal, und haben 3 Spalten neben einander angezeigt. Das beste Beispiel, das ich habe, ist The Verge (http://www.theverge.com/). Was ist der beste Weg, dies zu tun?

Quelle

2012-04-01 muttley91

Verwendung Schwimmer in Ihrem Stylesheet? – hjpotter92

Hasse es zu sagen, aber manchmal einfach mit der alten Schule Tabellenelement ist der einfachste Weg, um Inhalt in Zeilen und Spalten zu formatieren. Ich weiß, dass Sie nach einer css-Route suchen, also beschlossen, einen Kommentar hinzuzufügen, anstatt zu antworten. –

@TheJumpingFrog Ich habe Float verwendet, aber ich finde inkonsistentes Verhalten mit dieser abhängig von der Bildschirmgröße. Gibt es eine Möglichkeit zu sagen "immer in diesem einen Format anzeigen" mit der Float-Methode? – muttley91

Ich würde vorschlagen, dass Sie entweder <table> oder CSS verwenden.

CSS wird bevorzugt, um flexibler zu sein. Ein Beispiel wäre:

<!-- of course, you should move the inline CSS style to your stylesheet --> 
<!-- main container, width = 70% of page, centered --> 
<div id="contentBox" style="margin:0px auto; width:70%"> 

<!-- columns divs, float left, no margin so there is no space between column, width=1/3 --> 
    <div id="column1" style="float:left; margin:0; width:33%;"> 
    CONTENT 
    </div> 

    <div id="column2" style="float:left; margin:0;width:33%;"> 
    CONTENT 
    </div> 

    <div id="column3" style="float:left; margin:0;width:33%"> 
    CONTENT 
    </div> 
</div>

jsFiddle: http://jsfiddle.net/ndhqM/

float verwenden: links würde 3 Spalten aneinander haften machen, in innerhalb der zentrierten div "Content-Box" von links kommt.

Quelle

2012-04-01 18:33:31 AbSoLution8

Ich denke, dass Sie wollen, dass "Breite" innerhalb der Stil-Attribut: "Stil =" Marge : 0 auto; breite: 70%; "'. Mir sind auch keine Browser bekannt, die in ihrem Standard-Stylesheet den Rand auf "div" anwenden, so dass "margin: 0;" auf den floated divs überflüssig erscheint. – steveax

danke für die Erinnerung an die Breite. Fest. – AbSoLution8

Ich möchte hinzufügen, dass Mikey Antwort für meine persönlichen Formatierungsprobleme erforderlich war. Zukünftige Leser, sieh Mikey's Antwort so gut wie diese. – muttley91

Zusätzlich zu der 3 floated column Struktur (was ich auch vorschlagen würde), müssen Sie einen Clearfix einfügen, um Layoutprobleme mit Elementen nach dem columncontainer zu verhindern (sozusagen den columncontainer im Flow behalten) .

<div id="contentBox" class="clearfix"> 
.... 
</div>

CSS:

.clearfix { zoom: 1; } 
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } 
.clearfix:after { clear: both; }

Quelle

2012-04-01 18:40:05

Danke, das behebt ein Formatierungsproblem, das ich hatte. – muttley91

Gern geschehen. Denken Sie daran, dass dies der übliche Weg ist, um Layout-Probleme mit floated Elementen (wie ul-Menüs) zu beheben. –

Ich werde das auf jeden Fall notieren, da es nicht das erste Mal ist, dass ich Probleme damit habe. Vielen Dank! – muttley91

Sie sollten wahrscheinlich betrachten dies mit css3 obwohl es die Verwendung von hersteller Präfixe enthält.

Ich habe eine schnelle fiddle zu Demo, aber die Crux ist dies.

<style> 
.3col 
{ 
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    -moz-column-count: 3; 
    -moz-column-gap: 10px; 
    column-count:3; 
    column-gap:10px; 
} 
</style> 
<div class="3col"> 
<p>col1</p> 
<p>col2</p> 
<p>col3</p> 
</div>

Quelle

2013-05-31 08:34:06 Stimul8d

Sie können es nützlich finden, die Browser-Unterstützung auf [w3schools] zu kennen (http://www.w3schools.com/css3/css3_multiple_columns.asp); IE10 +. Ich muss auf bessere Browser-Unterstützung warten – Duncanmoo

@ Duncanmoo Link ist kaputt, versuchen Sie dieses: http://caniuse.com/multicolumn - derzeit nur etwa 14% der Browser-Unterstützung durch Nutzung (76% mit Präfixen). – naught101

Ich wünschte, ich könnte einen alten Kommentar bearbeiten, nun, hier ist die Browser-Unterstützung auf diesem Link [w3schools] (http://www.w3schools.com/css/css3_multiple_columns.asp). – Duncanmoo

Bootstrap. Schau dir ihr tolles Gittersystem here an.

Bootstrap verwenden, könnten Sie drei Spalten wie folgt machen:

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    </div> 
</div>

Quelle

2014-04-30 23:17:06 bhekman

Guter Punkt. Ich habe ein einfaches Beispiel hinzugefügt. – bhekman

Sie könnten auch versuchen.

.col{ 
 
    float: left; 
 
} 
 
.col + .col{ 
 
    float: left; 
 
    margin-left: 20px; 
 
} 
 

 
/* or */ 
 

 
.col:not(:nth-child(1)){ 
 
    float:left; 
 
    margin-left: 20px; 
 
}

<div class="row"> 
 
    <div class="col">column</div> 
 
    <div class="col">column</div> 
 
    <div class="col">column</div> 
 
</div>

ref: http://codepen.io/co0kie/pen/gPKNWX?editors=1100

Quelle

2016-02-01 09:46:49 co0kie

Beste Möglichkeit, Spalten in HTML/CSS zu tun

Antwort

Verwandte Themen