Beste Weg, um zu tun, Spalten in HTML/CSS

Ich bin auf der Suche nach einer Möglichkeit, die Anzeige über 3 Spalten Inhalt. Ich habe einen Weg gefunden, um anzuzeigen, wrap-around-Spalten, aber ich möchte nicht, dass für diese Seite. Ich bin auf der Suche nach einem Weg, zu sagen,

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

3 mal, und habe 3 Spalten angezeigt, neben einander. Das beste Beispiel habe ich die offhand ist Die Schwelle (http://www.theverge.com/). Was ist der beste Weg, dies zu tun?

InformationsquelleAutor der Frage muttley91 | 2012-04-01

  1. 37

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

    CSS ist bevorzugt für flexibler. 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/

    Mit float:left machen würde 3-Spalten-stick zu einander, kommen von Links innerhalb des zentrierten div "content-box".

    InformationsquelleAutor der Antwort AbSoLution8

  2. 21

    Sollten Sie wahrscheinlich halten mit css3 für dieses aber es ist auch die Verwendung von vendor-Präfixe.

    Hab ich klopfte eine schnelle fiddle zu demo, aber die crux ist.

    <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>

    InformationsquelleAutor der Antwort Stimul8d

  3. 9

    Zusätzlich zu den 3 schwebte Spalte Struktur (was ich empfehlen würde), müssen Sie zum einfügen eines clearfix um zu verhindern, dass layoutproblems mit Elementen nach der columncontainer (halten Sie die columncontainer in der Strömung, sozusagen...).

    <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; }

    InformationsquelleAutor der Antwort Frank van Wijk

  4. 2

    Bootstrap. Check-out Ihre awesome grid-system hier.

    Mit Bootstrap, man könnte die drei Spalten wie diese:

    <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>

    InformationsquelleAutor der Antwort bhekman

  5. 0

    Wenn Sie wollen, um mehrere (3+) Spalten hier ist ein tolles snippet, das perfekt funktioniert und validiert als HTML5 gültig:

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Multiple Colums</title>

        <!-- Styles -->
        <style>
            .flex-center {
                width: 100%;
                align-items: center;/*These two properties center vetically*/
                height: 100vh;/*These two properties center vetically*/
                display: flex;/*This is the attribute that separates into columns*/
                justify-content: center;
                text-align: center;
                position: relative;
            }
            .spaceOut {
                margin-left: 25px;
                margin-right: 25px;
            }
        </style>

    </head>
    <body>
        <section class="flex-center">
            <h4>Tableless Columns Example</h4><br />
            <div class="spaceOut">
                Column 1<br />
            </div>
            <div class="spaceOut">
                Column 2<br />
            </div>
            <div class="spaceOut">
                Column 3<br />
            </div>      
            <div class="spaceOut">
                Column 4<br />
            </div>
            <div class="spaceOut">
                Column 5<br />
            </div>
        </section>
    </body>
</html>

    InformationsquelleAutor der Antwort user2288580

Schreibe einen Kommentar