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