3 Spalten Layout HTML / CSS

Ich habe das folgende HTML-Layout:

<div class="container">
   <div class="column-center">Column center</div>
   <div class="column-left">Column left</div>
   <div class="column-right">Column right</div>
</div>

Gibt es eine Möglichkeit, die Spalten wie im folgenden Beispielraster anzuordnen, ohne HTML nur mit CSS zu ändern ?

----------------------------------------------------
|              |                   |               |
| Column left  |   Column center   | Column right  |
|              |                   |               |
----------------------------------------------------

So etwas sollte es tun:

.column-left{ float: left; width: 33.333%; }
.column-right{ float: right; width: 33.333%; }
.column-center{ display: inline-block; width: 33.333%; }

DEMO

BEARBEITEN

Um dies mit einer größeren Anzahl von Spalten zu tun, könnten Sie ein sehr einfaches Rastersystem erstellen. So etwas sollte beispielsweise für ein fünfspaltiges Layout funktionieren:

.column {
    float: left;
    position: relative;
    width: 20%;
  
    /*for demo purposes only */
    background: #f2f2f2;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
}

.column-offset-1 {
    left: 20%;
}
.column-offset-2 {
    left: 40%;
}
.column-offset-3 {
    left: 60%;
}
.column-offset-4 {
    left: 80%;
}

.column-inset-1 {
    left: -20%;
}
.column-inset-2 {
    left: -40%;
}
.column-inset-3 {
    left: -60%;
}
.column-inset-4 {
    left: -80%;
}

<div class="container">
   <div class="column column-one column-offset-2">Column one</div>
   <div class="column column-two column-inset-1">Column two</div>
   <div class="column column-three column-offset-1">Column three</div>
   <div class="column column-four column-inset-2">Column four</div>
   <div class="column column-five">Column five</div>
</div>

Wenn Sie das Glück haben, nur moderne Browser unterstützen zu können, können Sie flexible Boxen verwenden :

.container {
    display: flex;
}

.column {
    flex: 1;
    
    /*for demo purposes only */
    background: #f2f2f2;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
}

.column-one {
    order: 3;
}
.column-two {
    order: 1;
}
.column-three {
    order: 4;
}
.column-four {
    order: 2;
}
.column-five {
    order: 5;
}

<div class="container">
   <div class="column column-one">Column one</div>
   <div class="column column-two">Column two</div>
   <div class="column column-three">Column three</div>
   <div class="column column-four">Column four</div>
   <div class="column column-five">Column five</div>
</div>

Dies gilt weniger für @easwee als vielmehr für andere, die möglicherweise dieselbe Frage haben:

Wenn Sie keine Unterstützung für IE <10 benötigen, können Sie Flexbox verwenden . Es ist eine aufregende CSS3-Eigenschaft, die leider in mehreren verschiedenen Versionen implementiert wurde. Fügen Sie Herstellerpräfixe hinzu, und um eine gute browserübergreifende Unterstützung zu erhalten, sind plötzlich einige Eigenschaften mehr erforderlich, als es sollte.

Mit dem aktuellen, endgültigen Standard wären Sie fertig

.container {
    display: flex;
}

.container div {
    flex: 1;
}

.column_center {
    order: 2;
}

Das ist es. Wenn Sie ältere Implementierungen wie iOS 6, Safari <6, Firefox 19 oder IE10 unterstützen möchten, blüht dies auf

.container {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.container div {
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.column_center {
    -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
    -ms-flex-order: 2;              /* TWEENER - IE 10 */
    -webkit-order: 2;               /* NEW - Chrome */
    order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

jsFiddle-Demo

Hier ist ein ausgezeichneter Artikel über die browserübergreifende Unterstützung von Flexbox: Verwenden von Flexbox: Mischen von Alt und Neu

.container{
height:100px;
width:500px;
border:2px dotted #F00;
border-left:none;
border-right:none;
text-align:center;
}
.container div{
display: inline-block;
border-left: 2px dotted #ccc;
vertical-align: middle;
line-height: 100px;
} 
 .column-left{ float: left; width: 32%;  height:100px;}
.column-right{ float: right; width: 32%;  height:100px; border-right: 2px dotted #ccc;}
.column-center{ display: inline-block; width: 33%; height:100px;}

 <div class="container">
   <div class="column-left">Column left</div>
   <div class="column-center">Column center</div>
   <div class="column-right">Column right</div>
</div> 

Siehe diesen Link http://jsfiddle.net/bipin_kumar/XD8RW/2/

CSS:

.container {
    position: relative;
    width: 500px;
}
.container div {
    height: 300px;
}

.column-left {
    width: 33%;
    left: 0;
    background: #00F;
    position: absolute;
}
.column-center {
    width: 34%;
    background: #933;
    margin-left: 33%;
    position: absolute;
}
.column-right {
    width: 33%;
    right: 0;
    position: absolute;
    background: #999;
}

HTML:

<div class="container">
   <div class="column-center">Column center</div>
   <div class="column-left">Column left</div>
   <div class="column-right">Column right</div>
</div>

Hier ist die Demo: http://jsfiddle.net/nyitsol/f0dv3q3z/

CSS:

     .container div{
 width: 33.33%;
 float: left;
 height: 100px ;} 

Löschen Sie die Floats nach den Spalten

 .container:after {
 content: "";
 display: table;
 clear: both;}