关于页面的多种自适应布局——两列布局

我们在切页面的时候打交道最多的就是关于布局排版的技巧，我这里总结了一些平时做页面时用的到各种布局技巧，作为笔记便于日后随时查询。

1、简单结构1，列表在前，内容在后

<style type="text/css">
.layout{background-color:gray; padding:10px; border:10px solid orange; margin:10px 0; zoom:1;}
.layout:after{content:"";clear:both; display:block; height:0px; overflow:hidden;}
.wrap{}
.content{background-color:green; /*height:290px;*/}
.sidebar{background-color:blue; /*height:290px;*/ width:200px;}
p{color:#fff;font-family:arial; font-size:16px; line-height:30px;}
p.clear{clear:both;}
/**简单结构1，列表在前，内容在后**/
.layout-1{}
    .layout-1 .sidebar{float:left;}
    .layout-1 .content{margin-left:210px; _margin-left:207px; /*IE6下的3像素外边距问题*/}
.layout-1-1{}
    .layout-1-1 .sidebar{float:right;}
    .layout-1-1 .content{margin-right:210px; _margin-right:207px;text-overflow:ellipsis; white-space:nowrap; /*IE6下的3像素外边距问题*/}
.layout-2{}
    .layout-2 .sidebar{float:left; margin-right:10px; _margin-right:7px; /*IE6下的3像素外边距问题*/}
    .layout-2 .content{overflow:hidden; _zoom:1; /*"overflow" IE6下hasLayout没有起作用，使用zoom:1来实现*/}
.layout-2-1{}
    .layout-2-1 .sidebar{float:right; margin-left:10px; _margin-left:7px; /*IE6下的3像素外边距问题*/}
    .layout-2-1 .content{overflow:hidden; _zoom:1; /*"overflow" IE6下hasLayout没有起作用，使用zoom:1来实现*/}
.layout-3{position:relative;}
    .layout-3 .sidebar{position:absolute; left:10px; top:10px;}
    .layout-3 .content{margin-left:210px;}
.layout-3-1{position:relative;}
    .layout-3-1 .sidebar{position:absolute; right:10px; top:10px;}
    .layout-3-1 .content{margin-right:210px;}
</style>

<div class="layout layout-1">
    <div class="sidebar"><p>.layout-1 .sidebar{float:left;}</p></div>
    <div class="content"><p>.layout-1 .content{margin-left:210px; _margin-left:207px; /*IE6下的3像素外边距问题*/}</p></div>
    <p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
</div>
<div class="layout layout-1-1">
    <div class="sidebar"><p>.layout-1-1 .sidebar{float:right;}</p></div>
    <div class="content"><p>.layout-1-1 .content{margin-right:210px; _margin-right:207px; /*IE6下的3像素外边距问题*/}</p></div>
    <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
</div>

<div class="layout layout-2">
    <div class="sidebar"><p>.layout-2 .sidebar{float:left; margin-right:10px; _margin-right:7px; /*IE6下的3像素外边距问题*/}</p></div>
    <div class="content"><p>.layout-2 .content{overflow:hidden; _zoom:1; /*"overflow" IE6下hasLayout没有起作用，使用zoom:1来实现*/}</p></div>
    <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
</div>
<div class="layout layout-2-1">
    <div class="sidebar"><p>.layout-2-1 .sidebar{float:right; margin-left:10px; _margin-left:7px; /*IE6下的3像素外边距问题*/}</p></div>
    <div class="content"><p>.layout-2-1 .content{overflow:hidden; _zoom:1; /*"overflow" IE6下hasLayout没有起作用，使用zoom:1来实现*/}</p></div>
    <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
</div>
<div class="layout layout-3">
    <div class="sidebar"><p>.layout-3 .sidebar{position:absolute; left:10px; top:10px;}</p></div>
    <div class="content"><p>.layout-3 .content{margin-left:210px;}</p></div>
    <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
</div>
<div class="layout layout-3-1">
    <div class="sidebar"><p>.layout-3 .sidebar{position:absolute; right:10px; top:10px;}</p></div>
    <div class="content"><p>.layout-3 .content{margin-right:210px;}</p></div>
    <p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
</div>

2、简单结构2，内容在前，列表在后,这种布局兼容性不是很好，内容在前对于SEO优化很重要

<style type="text/css">
.layout{background-color:gray; padding:10px; border:10px solid orange; margin:10px 0; zoom:1;}
.layout:after{content:"";clear:both; display:block; height:0px; overflow:hidden;}
.wrap{}
.content{background-color:green; /*height:290px;*/}
.sidebar{background-color:blue; /*height:290px;*/ width:200px;}
p{color:#fff;font-family:arial; font-size:16px; line-height:30px;}
p.clear{clear:both;}

/**简单结构2，内容在前，列表在后**/
.layout-10{}
    .layout-10 .content{margin-left:210px; margin-bottom:-30px;}
    .layout-10 .sidebar{}
.layout-10-1{}
    .layout-10-1 .content{margin-right:210px; margin-bottom:-30px;}
    .layout-10-1 .sidebar{float:right;}
.layout-11{position:relative;}
    .layout-11 .content{margin-left:210px;}
    .layout-11 .sidebar{position:absolute; left:10px; top:10px;}
.layout-11-1{position:relative;}
    .layout-11-1 .content{margin-right:210px;}
    .layout-11-1 .sidebar{position:absolute; right:10px; top:10px;}

</style>
<div class="layout layout-10">
    <div class="content"><p>.layout-10-1 .content{margin-right:210px; margin-bottom:-30px;/**这里的margin-bottom:-30px;需要通过js来计算，取值为content区的高度，也可以给sidebar：margin-top:-30px;**/}</p></div>
    <div class="sidebar"><p>.layout-10 .sidebar{}</p></div>
    <p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
</div>
<div class="layout layout-10-1">
    <div class="content"><p>.layout-10-1 .content{margin-right:210px;}</p></div>
    <div class="sidebar"><p>.layout-10-1 .sidebar{float:right; margin-top:-30px;/**这里的margin-top:-30px;需要通过js来计算，取值为content区的高度，也可以给content：margin-bottom:-30px;后边的元素需要清除浮动**/}</p></div>
    <p class="clear">.layout-10-1 p{clear:both;}<br/>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
</div>

<div class="layout layout-11">
    <div class="content"><p>.layout-11 .content{margin-left:210px;}</p></div>
    <div class="sidebar"><p>.layout-11 .sidebar{position:absolute; left:10px; top:10px;}</p></div>
    <p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
</div>

<div class="layout layout-11-1">
    <div class="content"><p>.layout-11 .content{margin-left:210px;}</p></div>
    <div class="sidebar"><p>.layout-11 .sidebar{position:absolute; left:10px; top:10px;}</p></div>
    <p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
</div>

3、复杂结构,内容在前，列表在后，能够很好的实现自适应布局，并且兼容性好。内容在前对于SEO优化很重要

<style type="text/css">
.layout{background-color:gray; padding:10px; border:10px solid orange; margin:10px 0; zoom:1;}
.layout:after{content:"";clear:both; display:block; height:0px; overflow:hidden;}
.wrap{}
.content{background-color:green; /*height:290px;*/}
.sidebar{background-color:blue; /*height:290px;*/ width:200px;}
p{color:#fff;font-family:arial; font-size:16px; line-height:30px;}
p.clear{clear:both;}

/**复杂结构布局**/
.layout-21{}
    .layout-21 .wrap{ float:left; width:100%;}
    .layout-21 .content{margin-left:210px;}
    .layout-21 .sidebar{float:left; margin-left:-100%;}
.layout-22{}
    .layout-22 .wrap{float:left; width:100%;}
    .layout-22 .content{margin-right:210px;}
    .layout-22 .sidebar{float:right; margin-left:-200px;}
.layout-23{}
    .layout-23 .wrap{float:left; width:100%; margin-right:-200px;}
    .layout-23 .content{margin-right:210px;}
    .layout-23 .sidebar{float:left;}
.layout-24{}
    .layout-24 .wrap{float:right; width:100%; margin-left:-200px;}
    .layout-24 .content{margin-left:210px;}
    .layout-24 .sidebar{float:left;}
</style>
<div class="layout layout-21">
    <div class="wrap">
        <div class="content">
            内容区域,左漂浮
            <p>
                .layout-21 .wrap{ float:left; 100%;}<br />
                .layout-21 .content{margin-left:210px;}
            </p>
        </div>
    </div>
    <div class="sidebar">
        列表区域
        <p>
            .layout-21 .sidebar{float:left; margin-left:-100%;}
        </p>
    </div>
    <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p> 
</div>

<div class="layout layout-22">
    <div class="wrap">
        <div class="content">
            内容区域
            <p>
                .layout-22 .wrap{float:left; 100%;}<br />
                .layout-22 .content{margin-right:210px;}
            </p>

        </div>
    </div>
    <div class="sidebar">
        列表区域
        <p>
        .layout-22 .sidebar{float:right; margin-left:-200px;}
        </p>
    </div>
    <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p> 
</div>

<div class="layout layout-23">
    <div class="wrap">
        <div class="content">
            内容区域
            <p>
                .layout-23 .wrap{float:left; 100%; margin-right:-200px;}<br />
                .layout-23 .content{margin-right:210px;}
            </p>

        </div>
    </div>
    <div class="sidebar">
        列表区域
        <p>
        .layout-2 .sidebar{float:left;}
        </p>
    </div>
    <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p> 
</div>

<div class="layout layout-24">
    <div class="wrap">
        <div class="content">
            内容区域
            <p>
                .layout-24 .wrap{float:left; 100%;}<br />
                .layout-24 .content{margin-right:210px;}
            </p>

        </div>
    </div>
    <div class="sidebar">
        列表区域
        <p>
        .layout-24 .sidebar{float:right; margin-left:-200px;}
        </p>
    </div>
    <p class="clear">clear:both<br />这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>   
</div>