html - 如何更改 HTML 代码中 div 的顺序，用于 3 列 CSS 布局？

Question

我从 here 找到了一个很好的 CSS 代码，可以制作一个三列布局。 .但问题是，HTML 代码必须按以下顺序:

<div class='left'></div>
<div class='right'></div>
<div class='content'></div>

出于 SEO 目的，我想将内容放在首位。但它打破了布局。请看the demo .

那么我怎样才能让它适用于所有订单呢？或者只是一个 (2-1-3) 排序？

感谢您的帮助!

Answer 1

您可以使用position:absolute;(不要忘记将容器设置为position:relative;):

FIDDLE

CSS:

.threecolumns_container {
    width: 750px;
    margin:auto;
    position:relative;
}

.threecolumns_left {
    float: left;
    width: 150px;
}

.threecolumns_content {

    width:396px;
    position:absolute;
    left:150px;
}

.threecolumns_right {
    float: right;
    width: 200px;   
}

.threecolumns_clear {
    clear: both;
}


/* demo : 
----------*/
.threecolumns_container
{
    background-color:rgba(25,2,2,0.1);
}

.threecolumns_left
{
    border:1px solid red;
}
.threecolumns_content
{
    border:1px solid green;
}
.threecolumns_right
{
    border:1px solid blue;
}