我有以下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 | | | | | ----------------------------------------------------
这样的事情应该做到:
.column-left{ float: left; width: 33.333%; } .column-right{ float: right; width: 33.333%; } .column-center{ display: inline-block; width: 33.333%; }
编辑
要使用大量列来执行此操作,您可以构建一个非常简单的网格系统。例如,这样的事情应该适用于五列布局:
.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>
或者,如果您很幸运能够仅支持现代浏览器:
.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>