CSS布局：定宽居中布局，两列右侧自适应布局，三列中间自适应布局，全屏自适应布局

标签： css

一、定宽居中布局：

下面只是其中一种方法，更多方法请参见该文章：狠狠戳我

*{margin: 0;padding: 0;}
.parent{background: #ccc;}

.content{
    background: red;
    width: 800px;   /*1*/
    margin: 0 auto; /*2*/
}
</style>

<div class="parent">
    <div class="content">dadsa</div>        
</div>

效果图：
这里写图片描述

二、两列右侧自适应布局：

左边定宽，右边自适应
要求：一个不定宽度的容器被分为左右两列，左边定宽500px，右边自适应剩余宽度，且两列之间间距为10px。

1、方法一：absolute + margin

1) 给定左的width值
2）左 position: absolute;
3）右 margin-left: 510px;

<style>
*{margin: 0;padding: 0;}

.left{
    width:500px;        /*1*/
    background: blue;
    position: absolute; /*2*/  /*relative不行*/
}
.right{ 
    background: orange;
    margin-left: 510px; /*3*/  /*width + 10*/
}
</style>
<body>
<div class="parent">
    <div class="left">左侧定宽</div>
    <div class="right">右侧自适应</div>
</div>

效果图：
这里写图片描述

2、方法二：float + margin

1）写左元素width值
2）左 float: left;
3）右 margin-left: 510px;

<style>
*{margin: 0;padding: 0;}

.left{
    width:500px;       /*1*/
    background: blue;
    float:left;        /*2*/
}
.right{ 
    background: orange;
    margin-left: 510px; /*3*/  /*width + 10*/
}
</style>

<div class="parent">
    <div class="left">左侧定宽</div>
    <div class="right">右侧自适应</div>
</div>

效果图：同上

三、三列中间自适应布局：

左右定宽，中间自适应
要求：一个不定宽度的容器被分为左中右三列，左边定宽300px，右边定宽150px，中间列自适应剩余宽度，且三列之间间距为10px。

1、方法一：absolute + margin

1）写左右元素width值
2) 左右设为：position: absolute;top:0;
3) 左为 left: 0; 右为 right: 0;
4) 中间:margin:0 160px 0 310px;

<style>
*{margin: 0;padding: 0;}
.left,.right,.center{height:300px;}

.left,.right{
    position: absolute; /*2*/  /*relative不行*/
    top:0;              /*2*/
}
.left{
    width:300px;        /*1*/
    background: red;
    left: 0;            /*3*/
}
.right{
    width:150px;        /*1*/
    background: orange;
    right: 0;           /*3*/
}
.center{    
    background: blue;
    margin:0 160px 0 310px; /*4*/
}
</style>

<div class="parent">
    <div class="left">左侧定宽</div>
    <div class="center">中间自适应</div>
    <div class="right">右侧定宽</div>   
</div>

效果图：
这里写图片描述

2、方法二：float + margin

1）写左、右元素width值
2）左float: left; 右float: right;
3）中 margin: 0 160px 0 310px;
注意：左、右、中三部分 HTML的顺序不能错。

<style>
*{margin: 0;padding: 0;}
.left,.right,.center{height:300px;}

.left{
    width:300px;  /*1*/     
    background: red;
    float: left;  /*2*/
}
.right{
    width:150px;  /*1*/
    background: orange;
    float: right; /*2*/
}
.center{
    background: blue;
    margin: 0 160px 0 310px; /*3*/
}

</style>
<body>
<div class="parent">
    <!-- 注意顺序是左、右、中 -->
    <div class="left">左侧定宽</div>
    <div class="right">右侧定宽</div>
    <div class="center">中间自适应</div>     
</div>

效果图：同上

四、全屏自适应布局：

1、方法一：absolute

<style>
*{margin: 0;padding: 0;}

.header,.left,.right,.footer{
    position:absolute;   
    overflow:auto;
}
.header,.footer{
    width:100%;          
}
.header,.left,.footer{
    left:0;
}
.header{
    top:0;
    height:100px;
    background:red;
}
.left,.right{
    top:100px;
    bottom:50px;
}
.left{
    width:300px;
    background:yellow;
}
.right{
    left:300px;
    right:0;
    background:pink;
}
.footer{
    bottom:0;
    height:50px;
    background:gray;
}
</style>

    <div class="header"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="footer"></div>

效果图：
这里写图片描述

本文链接：https://blog.csdn.net/b954960630/article/details/81359926

智能推荐

数据结构与算法C++描述(14)---二叉搜索树

1、二叉搜索树的概念二叉搜索树是一棵可能为空的二叉树，一棵非空的二叉搜索树有满足如下特征：二叉树中所有的键值都是唯一的；根节点所有左子树的键值（如果有的话）小于根节点的键值；根节点所有右子树的键值（如果有的话）大于根节点的键值；根节点的左右子树也都是二叉搜索树。三个二叉搜索树如下： 2、二叉搜索树的C++描述对于二叉搜索树，主要操作有插入一个元素（Insert）删除键值为k的元素（D...

什么是数据库？简单的说，数据库就是一个存放数据的仓库，这个仓库是按照一定的数据结构（数据结构是指数据的组织形式或数据之间的联系）来组织，存储的，我们可以通过数据库提供的多种方法来管理数据库里的数据。数据库诞生于1950年，随着信息技术的发展和人类社会的不断进步，特别是2000年后，数据库不在仅仅是存储和管理数据了，而转变成用户所需要的各种数据管理的方式，数据库有很多种类和功能，从最简单的存储有...

Centos7搭建Hadoop3.1.3完全分布模式

详细搭建可以参考我的Hadoop2.8.0安装准备本文下载的是3.1.3版本的Hadoop 关闭防火墙虚拟机的准备安装3个虚拟机并实现ssh免密码的登录安装3个centos7虚拟机安装3个机器，机器分别叫master slave1 slave2 在/etc/hostname下修改主机名其他两台也是一样修改主机映射修改/etc/hosts文件修改这3台机器的/etc/hosts文...

【u-boot-2016到s5pv210】2.7 uboot NandFlash驱动

【u-boot-2016到s5pv210】2.7 uboot NandFlash驱动本章的问题： 1 nandflash是flash吗？ 2 nandflash的常用接口 3 nandflash的特性是什么？ 4 ok210上s5pv210是怎么控制nandflash的 5 u-boot-2016.09.01中，nandflash的流程 6 nandflash在u-boot驱动中的关注点是什么？...

muduo库之thread类

Thread类图 Thread::start()调用的是startThread(…) 关于startThread(…)函数，它的形参是ThreadDate类，下面是该类的结构体 `struct ThreadData { typedef muduo::Thread::ThreadFunc ThreadFunc; ThreadFunc func_; string name_...