特殊布局---三栏式布局

最新推荐文章于 2022-07-29 21:33:22 发布

攸宁-

最新推荐文章于 2022-07-29 21:33:22 发布

阅读量313

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/youning222/article/details/79730587

版权

三栏式布局

一、原理及思路

首先，设置一个大的div,宽度设置为90%（设置为整个页面的百分之九十），不用设置高度（可以由三个小div的高度撑开）并为其设置相对定位。

其次，在这个大的div里面设置三个小div,分别为left,main和right。先给left和right设置相同的高度，为其设置不同的背景颜色，并设置为绝对定位（上，左，右的值都为0）。

最后，为中间div元素main设置相同的高度，背景颜色，其margin的左、右的值分别为left、right的宽度。

二、代码展示

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
.wrap{width:90%; background-color:#ccc; margin:0 auto; position:relative;}
.left{width:200px; background-color:blue; height:300px; position:absolute; left:0; top:0;}
.right{width:250px; background-color:green;height:300px; position:absolute; right:0; top:0;}
.main{background-color:red; color:#fff;height:300px; margin:0 250px 0 200px;}
</style>
</head>
<body>
<div class="wrap">
	<div class="left"></div>
    <div class="main">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
    <div class="right"></div>
</div>
</body>
</html>

三、效果展示

圣杯布局

一、原理及思路

父元素包含左中右三个盒子，分别左浮动。
中间元素宽度100%（必须为第一个渲染）。
用margin-left的负值将两边盒子拉上去和中间盒子同行（左边-100%，右边-右盒子宽度）。
父元素用左右padding为左右盒子留位置。
用相对定位将左右元素移动到正确的位置上。
给父元素上清除浮动。

二、代码展示

<style type="text/css">
.wrap{width:90%; background-color:#ccc; margin:0 auto; padding:0 250px 0 200px; box-sizing:border-box; overflow:hidden;} 
.left{width:200px; background-color:blue; height:300px; float:left; margin-left:-100%; position:relative; left:-200px;}
.right{width:250px; background-color:green;height:300px; float:left; margin-left:-250px; position:relative; right:-250px;}
.main{width:100%;background-color:red; color:#fff;height:300px; float:left;}
</style>
</head>
<body>
<div class="wrap">
	<div class="main">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
	<div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

三、效果图---与三栏式布局相同

双飞翼布局

一、原理及思路

父元素包含左中右三个盒子，分别左浮动。
中间元素宽度100%（必须为第一个渲染）。
用margin-left的负值将两边盒子拉上去和中间盒子同行（左边-100%，右边-右盒子宽度）。
给中间元素设置子元素，并给其左右margin为左右盒子留位置。
给父元素上清除浮动。

二、代码展示

<style type="text/css">
.wrap{width:90%; background-color:#ccc; margin:0 auto; overflow:hidden;} 
.left{width:200px; background-color:blue; height:300px; float:left; margin-left:-100%;}
.right{width:250px; background-color:green;height:300px; float:left; margin-left:-250px;}
.main{width:100%;background-color:red; color:#fff;height:300px; float:left;}
.main>div{margin:0 250px 0 200px;}
</style>
</head>
<body>
<div class="wrap">
	<div class="main"><div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div></div>
	<div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

三、效果展示---同上

心得总结：这三种布局代表着三种不同的设计思想，但效果却是相同的。在学习过程中，我们应当清楚的知道并区分这三种思想，能够熟练的写出代码，并能用明确的语言复述思路和做法达到学习的目的。

攸宁-

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
特殊布局---三栏式布局

三栏式布局一、原理及思路首先，设置一个大的div,宽度设置为90%（设置为整个页面的百分之九十），不用设置高度（可以由三个小div的高度撑开）并为其设置相对定位。其次，在这个大的div里面设置三个小div,分别为left,main和right。先给left和right设置相同的高度，为其设置不同的背景颜色，并设置为绝对定位（上，左，右的值都为0）。最后，为中间div元素main设置相同的高度，背景...
复制链接

扫一扫