CSS左中右布局，规范案例

最新推荐文章于 2022-04-09 21:43:24 发布

转载最新推荐文章于 2022-04-09 21:43:24 发布 · 53 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jiqing9006/p/4983980.html

本文详细解析了HTML页面中使用div元素进行布局，并通过CSS的定位属性（relative, absolute, fixed）实现复杂的布局效果。重点讲解了如何利用相对定位（relative）作为布局基准，以及绝对定位（absolute）在实现特定布局时的用法，包括如何处理宽度、高度和边距等属性，以及在实际项目中应用这些技巧以提升网页设计的灵活性和美观性。

html部分

<body>  
    <form id="form1" runat="server">  
    <div id="wrap">  
        <div id="header">header</div>  
        <div id="container">  
            <div id="left_side">left_side</div>  
            <div id="content">content</div>  
            <div id="right_side">right-side</div>  
        </div>  
        <div id="footer">footer</div>  
    </div>  
    </form>  
</body>

css部分

<style type="text/css">
	#wrap{  
	    width:700px;  
	    margin:0 auto;  
	}  
	#header{  
	    margin:20px;  
	    height:80px;  
	    border:solid 1px #0000FF;  
	}  
	#container{  
	    position:relative;  
	    margin:20px;  
	    height:400px;  
	}  
	#left_side{  
	    position:absolute;  
	    top:0px;  
	    left:0px;  
	    border:solid 1px #0000FF;  
	    width:170px;  
	    height:100%;  
	}  
	#content{  
	    margin:0px 190px 0px 190px;  
	    border:solid 1px #0000FF;  
	    height:100%;  
	}  
	#right_side{  
	    position:absolute;  
	    top:0px;  
	    right:0px;  
	    border:solid 1px #0000FF;  
	    width:170px;  
	    height:100%;  
	}  
	#footer{  
	    margin:20px;  
	    height:80px;  
	    border:solid 1px #0000FF;  
	}  
</style>

　　说明

1、在#container中设置“position:relative;”，其作用是使得后面的绝对定位的基准为#container而不是以浏览器为其准。

2、左侧列#left_side和右侧#right_side列采用绝对定位，并且固定这两个div的宽度，而中间列#content由于需要根据浏览器自动调整，因此不设置类似属性。

但由于另外两个块的position属性设置为absolute，此时必须将它的margin-left和margin-right属性都设置为190px。

转载于:https://www.cnblogs.com/jiqing9006/p/4983980.html