3-kolommen layout HTML/CSS

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

Antwoord 2, autoriteit 14%

Dit is minder voor @easwee en meer voor anderen die misschien dezelfde vraag hebben:

Als u geen ondersteuning voor IE nodig heeft < 10, kunt u Flexbox gebruiken . Het is een opwindende CSS3-eigenschap die helaas in verschillende versies is geïmplementeerd; voeg leveranciersvoorvoegsels toe en voor goede ondersteuning voor meerdere browsers zijn plotseling nogal wat meer eigenschappen nodig dan zou moeten.

Met de huidige, definitieve standaard zou je klaar zijn met

.container {
    display: flex;
}
.container div {
    flex: 1;
}
.column_center {
    order: 2;
}

Dat is het. Als u oudere implementaties zoals iOS 6, Safari < 6, Firefox 19 of IE10, dit groeit uit tot

.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 is een uitstekend artikel over ondersteuning voor meerdere browsers van Flexbox: Flexbox gebruiken: oud en nieuw mixen

Antwoord 3, autoriteit 3%

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

Zie deze link http://jsfiddle.net/bipin_kumar/XD8RW/2/

Antwoord 4, autoriteit 3%

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 is de demo: http://jsfiddle.net/nyitsol/f0dv3q3z/

Antwoord 5

CSS:

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

Wis floats na de kolommen

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