html+css 常用布局

1.中间固定宽度，两侧自适应 
1.1  flex布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body,div{
            height: 100%;
        }
        .left {
            background-color: #ccc;
            flex:1;
        }

        .middle {
            background-color: #75cc23;
            flex:0 0 400px;
        }

        .right {
            background-color: #cc3b38;
            flex:1;
        }
        .con{
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
<div class="con">
    <div class="left">

    </div>
    <div class="middle">

    </div>
    <div class="right">

    </div>
</div>

</body>

//也可以用这个样式

html,body,div{
    height: 100%;
}
.left {
    background-color: #ccc;
    flex-grow:1;
}

.middle {
    background-color: #75cc23;
    width:400px;
}

.right {
    background-color: #cc3b38;
    flex-grow:1;
}
.con{
    display: flex;
    justify-content: center;
}


1.2 calc+float

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body,div{
            height: 100%;
        }
        .left,.right {
            background-color: #ccc;
            float: left;
            width:calc((100% - 400px) / 2)
        }

        .middle {
            background-color: #75cc23;
            width:400px;
            float:left;
        }

        .right {
            background-color: #cc3b38;

　　　　 }
    </style>
</head>
<body>
<div class="con">
    <div class="left">

    </div>
    <div class="middle">

    </div>
    <div class="right">

    </div>
</div>

</body>
</html>

2.两边固定 中间自适应
2.1浮动布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>title</title>
    <style type="text/css">
        .con div{
            min-height: 200px;
        }
        .con .left{
            float: left;
            width: 300px;
            background: #72f5ff;
        }
        .con .right{
            float: right;
            width: 300px;
            background: #7aff73;
        }
        .con .middle{
            background: #ff2d21;
        }

    </style>
</head>
<body>

<div class="con">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle">

    </div>
</div>

</body>
</html>
2.2使用绝对定位

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>绝对定位布局</title>
    <style type="text/css">
        .con div{
            position: absolute;
            min-height: 200px;
        }
        .con .left{
            left: 0;
            width: 300px;
            background: red;
        }
        .con .right{
            right: 0;
            width: 300px;
            background: blue;
        }
        .con .middle{
            left: 300px;
            right: 300px;
            background: pink;
        }

    </style>
</head>
<body>

<div class="con">
    <div class="left"></div>
    <div class="middle">

    </div>
    <div class="right"></div>
</div>

</body>
</html>
2.3 flex布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>flex</title>
    <style type="text/css">
        .con{
            min-height: 200px;
            display: flex;
        }
        .con .left{
            width: 300px;
            background: red;
        }
        .con .right{
            width: 300px;
            background: blue;
        }
        .con .middle{
            flex-grow: 1;
            background: #ffa861;
        }

    </style>
</head>
<body>

<div class="con">
    <div class="left"></div>
    <div class="middle">
    </div>
    <div class="right"></div>
</div>

</body>
</html>

html+css 常用布局的更多相关文章

CSS常用布局实现方法
CSS 布局对我来说,既熟悉又陌生.我既能实现它,又没有很好的了解它.所以想总结一下,梳理一下 CSS 中常用的一列,两列,三列布局等的实现方法.本文小白,仅供参考.但也要了解下浮动,定位等. 一.一 ...
css常用布局
1.一列布局 html: <div class="header"></div> <div class="body">< ...
css 常用布局
「前端那些事儿」③ CSS 布局方案我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案话不多说,上代码! 居中布局以下居中布局均以不定宽为前提,定宽情况包含其中 1.水平居中 a ...
CSS常用布局整理（二）
1-2-1单列变宽布局 side列定宽300px,content列变宽,尺寸是100%-300px.核心的问题就是浮动列的宽度应该等于“100% - 300px”,而CSS显然不支持这种带有减法运算的 ...
CSS常用布局整理
固定宽度布局 1-2-1布局(浮动) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <titl ...
CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局当年主流的布局方式,第一种是通过table tr td布局示例: <style type="text/css"> ta ...
CSS常用布局技巧实例
末尾用省略号! white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ######################## 两个i ...
CSS常用布局学习笔记
水平居中-行内元素如果是文字和图片这类的行内元素,则在其父级元素上加上样式:text-align:center; 水平居中-定宽块元素 div{ width:100px; margin:0 auto ...
DIV+CSS常用网页布局技巧！
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

随机推荐

python基础三（深浅拷贝）
1.赋值操作 list_1 = [1,2,3,['barry','Jerry']] list_2 = list_1 list_1[0] = 111 print(list_1) # [111, 2, 3 ...
python字符串比较大小
zfill函数 xs = ['] print (sorted(xs))
Django框架（二十一）—— Django rest_framework-权限组件
目录 Django rest_framework-权限组件一.权限组件的使用 1.使用语法 2.全局使用.局部使用.局部禁用权限二.源码分析 1.Book中没有as_view 2.APIView的 ...
@RequestParam 引发的编译问题
在使用SpringMVC绑定基本类型(如String,Integer等)参数时,应通过@RequestParam注解指定具体的参数名称,否则,当源代码在非debug模式下编译后,运行时会引发Handl ...
HDU3450_Counting Sequences
题意: 让你从所给的序列中找到他的子序列,使他们相邻之间差距不超过d,问有多少个转移的子序列这题第一眼大概就知道是状态转移,sum[i]表示以前i个中有多少个,那么sum[i+1]比sum[i] 多 ...
UVA
A network is composed of N computers connected by N - 1 communication links such that any two comput ...
Dubbo 微服务系列（03）服务注册
Dubbo 微服务系列(03)服务注册 [TOC] Spring Cloud Alibaba 系列目录 - Dubbo 篇 1. 背景介绍图1 Dubbo经典架构图注:本图来源 Dubbo官方架构 ...
一、最新Kafka单节点部署+测试完整
每次学一个东西从基础的开始,循序渐进. 不急不躁,路还很长. 所有教程都是学习汪文君大神的kafka教程的. 一.部署这里选的kafka版本是 0.10.2.1 下载连接 https://dow ...
循序渐进学.Net Core Web Api开发系列【17】：.Net core自动作业之Hangfire
nuget搜索:Hangfire 安装即可,这里我选择的是 1.7.0-beta1 版本我是用这个集成到了 mvc api里这里需要在 Startup 文件里进行如下配置在配置方法 Config ...
Nodejs入门级基础+实战
这篇随笔将会按序记录如下内容: NodeJs 简介安装 NodeJs HTTP 模块.URL 模块 CommonJs 和 Nodejs 中自定义模块 NodeJs FS 模块利用 HTTP 模块 ...

html+css 常用布局

html+css 常用布局的更多相关文章

随机推荐

热门专题