3列布局HTML / CSS [英] 3 column layout HTML/CSS
本文介绍了3列布局HTML / CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下HTML布局:
< div class =container>
< div class =column-center>列中心< / div>
< div class =column-left>左列< / div>
< div class =column-right>右列< / div>
< / div>
任何机会像下面的示例网格一样排列列,而不改变HTML 仅使用CSS?
--------------------- -------------------------------
| | | |
|左栏|列中心|列右|
| | | |
---------------------------------------------- ------
解决方案
it:
.column-left {float:left;宽度:33%; }
.column-right {float:right;宽度:33%; }
.column-center {display:inline-block;宽度:33%; }
EDIT
列可以构建一个非常简单的网格系统。例如,类似这样的应该适用于五列布局:
.column {float:left;位置:相对; width:20%; / *仅供演示* / background:#f2f2f2; border:1px solid#e6e6e6; column-offset-3 {left:20%;} column-offset-2 {left:40%;} column-offset-3 {left:60%;} -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>第一列< / div> < div class =column column-two column-inset-1>第二列< / div> < div class =column column-three column-offset-1>第三列< / div> < div class =column column-four column-inset-2>第四列< / div> < div class =column column-five>第五列< / div>< / div>
或者,如果您足够幸运,只能支持现代浏览器,则可以使用 灵活框 :
.container {display: flex;}。column {flex:1; / *仅供演示* / background:#f2f2f2; border:1px solid#e6e6e6; box-sizing:border-box;}。column-one {order:3;}。column-two {order:1;}。column-three {order:4;}。 column-five {order:5;}
< div class =container> < div class =column column-one>第一列< / div> < div class =column column-two>第二列< / div> < div class =column column-three>第三列< / div> < div class =column column-four>第四列< / div> < div class =column column-five>第五列< / div>< / div>
I have the following 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>
Any chance to arrange the columns like on the below sample grid without changing HTML using CSS only?
----------------------------------------------------
| | | |
| Column left | Column center | Column right |
| | | |
----------------------------------------------------
解决方案
Something like this should do it:
.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }
EDIT
To do this with a larger number of columns you could build a very simple grid system. For example, something like this should work for a five column layout:
.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>
Or, if you are lucky enough to be able to support only modern browsers, you can use 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>
这篇关于3列布局HTML / CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文