DIV+CSS如何实现两列布局

2024-04-02 19:04:59 408人浏览安东尼

摘要

这篇文章主要介绍了DIV+CSS如何实现两列布局，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。1、宽度自适应两列布局　　两列布局可以使用浮动

这篇文章主要介绍了DIV+CSS如何实现两列布局，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

1、宽度自适应两列布局

　　两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。

　　当元素使用了浮动之后，会对周围的元素造成影响，那么就需要清除浮动，通常使用两种方法。可以给受到影响的元素设置 clear:both，即清除元素两侧的浮动，也可以设置具体清除哪一侧的浮动：clear:left 或 clear:right，但必须清楚的知道到底是哪一侧需要清除浮动的影响。也可以给浮动的父容器设置宽度，或者为 100%，同时设置 overflow:hidden，溢出隐藏也可以达到清除浮动的效果。

　　同理，两列宽度自适应，只需要将宽度按照百分比来设置，这样当浏览器窗口调整时，内容会根据窗口的大小，按照百分比来自动调节内容的大小。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>宽度自适应两列布局</title>  
<style>  
*{margin:0;padding:0;}   
#herder{   
    height:50px;   
    background:blue;   
}   
.main-left{   
    width:30%;   
    height:800px;   
    background:red;   
    float:left;   
}   
.main-right{   
    width:70%;   
    height:800px;   
    background:pink;   
    float:right;   
}   
#footer{   
    clear:both;   
    height:50px;   
    background:gray;   
}   
</style>  
</head>  
<body>  
<div id="herder">页头</div>  
<div class="main-left">左列</div>  
<div class="main-right">右列</div>  
<div id="footer">页脚</div>  
</body>  
</html>

2、固定宽度两列布局

　　宽度自适应两列布局在网站中一般很少使用，最常使用的是固定宽度的两列布局。

　　要实现固定宽度的两列布局，也很简单，只需要把左右两列包裹起来，也就是给他们增加一个父容器，然后固定父容器的宽度，父容器的宽度固定了，那么这两列就可以设置具体的像素宽度了，这样就实现了固定宽度的两列布局。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>固定宽度两列布局</title>  
<style>  
*{margin:0;padding:0;}   
#herder{   
    height:50px;   
    background:blue;   
}   
#main{   
    width:960px;   
    margin:0 auto;   
    overflow:hidden;   
}   
#main .main-left{   
    width:288px;   
    height:800px;   
    background:red;   
    float:left;   
}   
#main .main-right{   
    width:672px;   
    height:800px;   
    background:pink;   
    float:right;   
}   
#footer{   
    width:960px;   
    height:50px;   
    background:gray;   
    margin:0 auto;   
}   
</style>  
</head>  
<body>  
<div id="herder">页头</div>  
<div id="main">  
    <div class="main-left">左列</div>  
    <div class="main-right">右列</div>  
</div>  
<div id="footer">页脚</div>  
</body>  
</html>

3、两列居中自适应布局

　　同理，只需要给定父容器的宽度，然后让父容器水平居中。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>两列居中自适应布局</title>  
<style>  
*{margin:0;padding:0;}   
#herder{   
    height:50px;   
    background:blue;   
}   
#main{   
    width:80%;   
    margin:0 auto;   
    overflow:hidden;   
}   
#main .main-left{   
    width:20%;   
    height:800px;   
    background:red;   
    float:left;   
}   
#main .main-right{   
    width:80%;   
    height:800px;   
    background:pink;   
    float:right;   
}   
#footer{   
    width:80%;   
    height:50px;   
    background:gray;   
    margin:0 auto;   
}   
</style>  
</head>  
<body>  
<div id="herder">页头</div>  
<div id="main">  
    <div class="main-left">左列</div>  
    <div class="main-right">右列</div>  
</div>  
<div id="footer">页脚</div>  
</body>  
</html>

4、固定宽度横向两列布局

　　和单列布局相同，可以把所有块包含在一个容器中，这样做方便设置，但增加了无意义的代码，固定宽度就是给定父容器的宽度，然后中间主体使用浮动。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>横向两列布局</title>  
<style>  
*{margin:0;padding:0;}   
#warp{   
    width:960px;   
    margin:0 auto;   
    margin-top:10px;   
}   
#herder{   
    height:50px;   
    background:blue;   
}   
#nav{   
    height:30px;   
    background:orange;   
    margin:10px 0;   
}   
#main{   
    width:100%;   
    margin-bottom:10px;   
    overflow:hidden;   
}   
#main .main-left{   
    width:640px;   
    height:200px;   
    background:yellow;   
    float:left;   
}   
#main .main-right{   
    width:300px;   
    height:200px;   
    background:pink;   
    float:right;   
}   
#content{   
    width:100%;   
    overflow:hidden;   
}   
#content .content-left{   
    width:640px;   
    height:800px;   
    background:lightgreen;   
    float:left;   
}   
#content .content-right-sup{   
    width:300px;   
    height:500px;   
    background:lightblue;   
    float:right;   
}   
#content .content-right-sub{   
    width:300px;   
    height:240px;   
    background:purple;   
    margin-top:20px;   
    float:right;   
}   
#footer{   
    height:50px;   
    background:gray;   
    margin-top:10px;   
}   
</style>  
</head>  
<body>  
<div id="warp">  
    <div id="herder">页头</div>  
    <div id="nav">导航</div>  
    <div id="main">  
        <div class="main-left">左-上</div>  
        <div class="main-right">右-上</div>  
    </div>  
    <div id="content">  
        <div class="content-left">左-下</div>  
        <div class="content-right-sup">右-上</div>  
        <div class="content-right-sub">右-下</div>  
    </div>  
    <div id="footer">页脚</div>  
</div>  
</body>  
</html>

感谢你能够认真阅读完这篇文章，希望小编分享的“DIV+CSS如何实现两列布局”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网node.js频道，更多相关知识等着你来学习!

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: DIV+CSS如何实现两列布局

本文链接: https://www.lsjlt.com/news/81087.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341