CSS布局技巧-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

使宽度自适应使用百分比

一、一列布局

使一个div元素居中，要给其设置宽度，并设置margin:0 auto；即可。

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一列居中布局</title>
	<style type="text/css">
    	* { padding:0; margin:0;}
    	.main { height:300px; width:800px; background-color:#900; margin:0 auto; }
    </style>
</head>

<body>
	<div class="main"></div>
</body>
</html>

效果：

二、两列布局

固定宽度的两列布局：在上面的main div元素中添加两个div，可以使用百分比，也可以使用像素固定其宽度。

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一列居中布局</title>
	<style type="text/css">
    	* { padding:0; margin:0;}
    	.main { width:800px; height:400px; background-color:#900; margin:0 auto; }
        .left { width:250px; height:inherit; background-color:#CCC; float:left; }
        .right { width:550px; height:inherit; background-color:#666; float:left; }
    </style>
</head>

<body>
	<div class="main">
    	<div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

效果：

三、三列布局

三列宽度相等

实现方法：

设置三列的宽度都为33.33%，并设置三列div元素左浮动。

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三列宽度相等布局</title>
    <style type="text/css">
        #div1 { width:33.33%; height:500px; float:left; background-color:#f00;}
        #div2 { width:33.33%; height:500px; float:left; background-color:#0f0;}
        #div3 { width:33.33%; height:500px; float:left; background-color:#00f;}
    </style>
</head>

<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

效果：

左右宽度固定，中间自适应

实现方法：

左右div块元素设置固定宽度，中间div不设置；
左右div设置position为absolute，并且分别设置位于浏览器左上角和右上角；
设置中间div的左右margin值分别为左右div元素的宽度。

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三列布局——中间自适应宽度</title>
    <style type="text/css">
    	* { padding:0; margin:0; }
        #div1 { width:200px; height:500px; position:absolute; left:0; top:0; background-color:#f00;}
        #div2 { height:500px; margin:0 300px 0 200px; background-color:#0f0;}
        #div3 { width:300px; height:500px; position:absolute; right:0; top:0; background-color:#00f;}
    </style>
</head>

<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

效果：

四、混合布局

实现：

利用基础的一列、两列、三列布局知识进行组合，利用浮动和定位对网页进行布局。

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>混合布局</title>
    <style type="text/css">
    	* { padding:0; margin:0; }
        .top { height:50px; background-color:#f00;}
        .top-center { width:800px; height:inherit; margin:0 auto; background-color:#009;} 
        .main { width:800px; height:400px; margin:0 auto; background-color:#0f0;}
        .main-left { width:200px; height:inherit; float:left; background-color:#FF0; } 
        .main-right {width:600px; height:inherit; float:right; background-color:#0FF; }
        .sub-left { width:400px; height:inherit; float:left; background-color:#C60;}
        .sub-right { width:200px; height:inherit; float:left; background-color:#F0C;}
        .foot { width:800px; height:50px; margin:0 auto; background-color:#00f;}
    </style>
</head>

<body>
    <div class="top">
    	<div class="top-center"></div>
    </div>
    <div class="main">
    	<div class="main-left"></div>
        <div class="main-right">
        	<div class="sub-left"></div>
            <div class="sub-right"></div>
        </div>
    </div>
    <div class="foot"></div>
</body>
</html>

效果：