3栏布局HTML/CSS

Question

我有以下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> 

任何机会，以安排像在下面的示例电网列，而不只是使用CSS改变HTML？

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

Answer 1

像这样的东西应该这样做：

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

DEMO

编辑

到具有更大的列数，你可以建立一个非常简单的网格系统做到这一点。例如，这样的事情应该为五列布局工作：

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

或者，如果你足够幸运能够只支持现代浏览器，你可以使用flexible boxes：

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

Answer 2

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

请参阅此链接http://jsfiddle.net/bipin_kumar/XD8RW/2/

Answer 3

这是少@easwee多为别人可能有同样的问题：

如果你不要求对IE < 10的支持，您可以使用Flexbox。这是一个令人兴奋的CSS3属性，不幸的是在几个不同的版本中实现，添加供应商前缀，并获得良好的跨浏览器支持突然需要比它应该更多的属性。

随着目前，最终的标准，你会用

.container { 
    display: flex; 
} 

.container div { 
    flex: 1; 
} 

.column_center { 
    order: 2; 
} 

就是这样做。如果你想支持旧的实现像iOS 6中，Safari浏览器< 6，火狐19或IE10，此花开成

.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

这里是关于Flexbox的跨浏览器支持的优秀文章：Using Flexbox: Mixing Old And New

Answer 4

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> 

以下是演示：http://jsfiddle.net/nyitsol/f0dv3q3z/

Answer 5

RWD模板1，2，3，4列

https://fxstar.eu/rwd.html

Github上：https://github.com/fxstar/PsdToHtml/blob/master/rwd.html