CSS三栏布局——双飞燕定位

这种布局方式需要对父容器设置padding,使用padding来给左右两栏空出空间

如果左右两边使用绝对定位,那么方法就和上一节的方法差不多,如果使用相对定位,在结合浮动的话,方法代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>三列布局</title>
    <style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
        overflow: hidden;
        padding: 0 210px;
    }
    .box .box-content {
        height: 100%;
 		width:100%;       
        float: left;
        background-color: blue;
    } 
    .box .box-left { 
        width: 200px; 
        position: relative; 
        height: 300px; 
        float: left;
        left: -210px;
        margin-left: -100%;
        background-color: green; 
    } 
    .box .box-right { 
        width: 200px; 
        position: relative; 
        min-height: 100%; 
        float: left;
        margin-left: -200px;
        right: -210px;
        background-color: pink; 
    } 
    header,footer { height: 75px; background-color: aqua; } 
</style> 
</head>
<body> 
    <header> </header> 
    <div class="box"> 
        <div class="box-content">
            中间内容区
        </div>
        <div class="box-left">
            左边区域内容   
        </div>
        <div class="box-right">
            右边区域
        </div> 
    </div>
    <footer>
    </footer>
</body>
</html>

这里的关键思路是:

1、首先使用margin-left或者margin-right将左右元素移动到上一行去。

2、根据相对定位,使用left或者right将左右元素移动到第一行合适的位置。

版权声明:著作权归作者所有。

相关推荐

用来显示页面布局,margin,padding的CSS hack

在做前端开发过程中,有时要查看整体页面的布局,padding,margin。设置是在不同浏览器的实现情况。以下Javascript脚本可以添加到浏览器的书签中,用来打开显示页面的布局,margin以及padding。CSS hack脚本javascript: (function() { var elements = document.body.getElementsByTagName('*');

Python定义全局变量

Python使用global指令来声明一个全局变量。示例globvar = 0 def set_globvar_to_one():     global globvar    # 在使用全局变量前,必须先声明为global    &nbs

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主

iOS11固定UISearchBar在导航栏的高度

iOS 11重新设计了UISearchBar,四个角改为圆角,高度变大。在导航栏添加搜索框可能会导致导航栏高度变大,所以有必要固定UISearchBar的高度。固定搜索栏的高度为44let searchBar = UISearchBar()  //配置searchBar相关代码 navigationItem.titleView =&nbs

[译]iOS11安全区布局指南(Safe Area Layout Guide)

Apple在iOS7为UIViewController新增了topLayoutGuide和bottomLayoutGuide属性。它们可以让你创建约束以避免内容被UIKit的横条,如状态、导航或标签栏覆盖。在iOS 11这些布局指南被废弃,并被单一的安全区布局指南代替。顶部和底部布局指南——概述这是使用顶部和底部布局指南在导航控制器和标签栏插入视图控制器的示例:绿色的内容视图相对底部锚点