3列レイアウトのHTML/CSS

Question

Iきた次の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を使用することができます。たとえば、このようなものは、5列のレイアウトのために働く必要があります。

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

これは、同じ質問を持っているかもしれない他の人のための@easweeにはあまり多くあり、このリンクにhttp://jsfiddle.net/bipin_kumar/XD8RW/2/

Answer 3

を参照してください：あなたはIE < 10のためのサポートを必要としない場合、あなたはFlexboxを使用することができます

を。残念なことに、いくつかの異なるバージョンで実装されたエキサイティングなCSS3のプロパティです。ベンダーのプレフィックスを追加して、クロスブラウザーのサポートを急にするのは、はるかに多くのプロパティを必要とします。現在、最終基準で

、あなたはそれだ

.container { 
    display: flex; 
} 

.container div { 
    flex: 1; 
} 

.column_center { 
    order: 2; 
} 

で行われることになります。あなたはiOSの6、サファリ< 6、Firefoxの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

にこの花がフレキシボックスクロスブラウザのサポートについての優れた記事です：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