float浮动

<section class="layout float">
<style media="screen">
.layout.float .left{
float: left;
width: 300px;
background: pink;
}
.layout.float .right{
float: right;
width: 300px;
background: lightblue;
}
.layout.float .center {
background: lightyellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
1.这是三栏布局中的中间部分
2.这是三栏布局中的中间部分
</div>
</article>
</section>

absolute绝对定位

<section class="layout absolute">
<style media="screen">
.layout.absolute .left-right-center>div {
position: absolute;
}
.layout.absolute .left {
width: 300px;
left: 0;
background: lightblue;
}
.layout.absolute .right {
width: 300px;
right: 0;
background: lightgreen;
}
.layout.absolute .center {
left: 300px;
right: 300px;
background: pink;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>绝对定位解决方案</h1>
2.这是三栏布局的中间部分
</div>
</article>
</section>

flex布局

<section class="layout flexbox">
<style media="screen">
.layout.flexbox .left-center-right {
margin-top: 140px;
display: flex;
}
.layout.flexbox .left {
width: 300px;
background: lightcoral;
}
.layout.flexbox .center {
flex:1;
background: lightgray;
}
.layout.flexbox .center2 {
flex:1; /*按照数字的比例自动分配剩余空间*/
background: lightgreen;
}
.layout.flexbox .right {
width: 300px;
background: lightblue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>flex布局解决方案</h1>
3.这是三栏布局的中间部分
</div>
<div class="center2">
<h1>flex布局解决方案</h1>
3.这是三栏布局的中间部分
</div>
<div class="right"></div>
</article>
</section>

table布局

<section class="layout table">
<style>
.layout.table .left-center-right {
width: 100%;
height: 100px;
display: table;
}
.layout.table .left-center-right>div {
display: table-cell;
}
.layout.table .left {
width: 300px;
background: lightgreen;
}
.layout.table .center {
background: pink;
}
.layout.table .right {
width: 300px;
background: lightblue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>table解决方案</h1>
4.这是三栏布局的中间部分
</div>
<div class="right"></div>
</article>
</section>

grid网格布局

<section class="layout grid">
<style>
.layout.grid .left-center-right {
display: grid;
width: 100%;
grid-template-rows:100px;
grid-template-columns:300px auto 300px;
}
.left {
background: lightgreen;
}
.center {
background: pink;
}
.right {
background: lightblue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>网格布局解决方案</h1>
5.这是三栏布局的中间部分
</div>
<div class="right"></div>
</article>
</section>

用五种不同的布局方式实现“左右300px中间自适应”的效果的更多相关文章

  1. iOS五种本地缓存数据方式

    iOS五种本地缓存数据方式   iOS本地缓存数据方式有五种:前言 1.直接写文件方式:可以存储的对象有NSString.NSArray.NSDictionary.NSData.NSNumber,数据 ...

  2. JavaScript常见的五种数组去重的方式

    ▓▓▓▓▓▓ 大致介绍 JavaScript的数组去重问题在许多面试中都会遇到,现在做个总结 先来建立一个数组 var arr = [1,2,3,3,2,'我','我',34,'我的',NaN,NaN ...

  3. Java中五种遍历HashMap的方式

    import java.util.HashMap; import java.util.Iterator; import java.util.Map; public class Java8Templat ...

  4. 五种团队的组织方式落地 DevOps

    原文链接:https://blog.matthewskelton.net/2013/10/22/what-team-structure-is-right-for-devops-to-flourish/ ...

  5. 只要一行代码,实现五种 CSS 经典布局

    常用的页面布局,其实就那么几个.下面我会介绍5个经典布局,只要掌握了它们,就能应对绝大多数常规页面. 这几个布局都是自适应的,自动适配桌面设备和移动设备.代码实现很简单,核心代码只有一行,有很大的学习 ...

  6. 【Android 复习】:Android五种布局的使用方法

    ---恢复内容开始--- 在Android布局中,有五种常用的布局,下面我们就来学习一下这几种布局的使用方式 1) 线性布局:LinearLayout 2) 帧布局:  FrameLayout 3)  ...

  7. Android开发之基本控件和详解四种布局方式

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

  8. Ngui 五种点击事件实现方式及在3d场景中点透的情况

    http://www.unity蛮牛.com/thread-22018-1-1.html ngui作为unity界面插件之一中,无疑是最好用,使用最多的了从自学unity到现在界面一直使用它 由于它的 ...

  9. ASP.NET Core中配置监听URLs的五种方式

    原文: 5 ways to set the URLs for an ASP.NET Core app 作者: Andrew Lock 译者: Lamond Lu 默认情况下,ASP. NET Core ...

随机推荐

  1. SQL Server作业的备份

    作业备份,不是备份数据库,是备份作业.我的方法是把作业导出成文件备份起来,因为当你服务器维护的多了的时候很多你的作业 就很成问题,很麻烦.最好能够作业实现同步,这个也是第一步,保存成文件,之后个人设想 ...

  2. 禁用 ipv6

    # 禁用整个系统所有接口的IPv6 net.ipv6.conf.all.disable_ipv6 = # 禁用某一个指定接口的IPv6(例如:eth0, lo) net.ipv6.conf.lo.di ...

  3. Golang数据库操纵对IN语句的支持

    一: 在实际的工程项目中,SQL通常使用预编译的形式进行执行操纵,可以有效的防止SQL注入的风险,提高编码的规范性.golang中使用sqlx进行sql查询的时候,在使用in语句在一个集合中查询的时候 ...

  4. jquery ajax跨越

    JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问 1.jsonp之$.ajax js $.ajax({ ...

  5. @ font-face 引入本地字体文件

    @font-face { font-family: DeliciousRoman; src: url('…/Delicious-Roman.otf'); font-stretch: condensed ...

  6. centos apache安装oracle扩展

    参考网址: http://blog.csdn.net/a82168506/article/details/11763989 步骤如下: 下载安装包,下载地址.(我下载的11.1版本) http://w ...

  7. 前端(Node.js)(3)-- Node.js实战项目开发:“技术问答”

    1.Web 与 Node.js 相关技术介绍 1.1.Web应用的基本组件 web应用的三大部分 brower(GUI)<==>webserver(business logic.data ...

  8. [转]深入理解ajax系列——响应编码

    我们接收到的 ajax 响应主体类型可以是多种形式的,包括字符串String.ArrayBuffer对象.二进制Blob对象.JSON对象.javascirpt文件及表示 XML文档的Document ...

  9. 正确而又严谨得ajax原生创建方式

    自己去封装一个xhr对象是一件比较麻烦的事情.其实也不麻烦,注意逻辑和一个ie6兼容方案(可无),和一个304 其他2开头的status都可以就好了 <!DOCTYPE html> < ...

  10. Idea代理设置与Java程序的代理设置

    最近在学习WebService的过程中,为了弄清楚发送和接收的包的数据结构,使用Fiddler抓取包的数据.开始先配置了Idea的代理设置,但执行Java代码发送请求时,依然无法在Fiddler中抓取 ...