等高布局:

HTML结构如下:

<div class="wrapper">
<div class="box">
<h1>...</h1>
<p>...</p>
<div class="bottom"></div>
</div>
</div>

1.padding补值法

css代码如下:

.wrapper{
width: 100%;
overflow: hidden;
}
.box{
width: 250px;
margin-left: 20px;
float: left;
display: inline;
padding: 20px;
background: #89ac10;
margin-bottom: -500px;
padding-bottom:500px;
border: 2px solid #f0c;
}

运行结果如下:

缺点:等高的div没有底边的边框,常用解决方法是使用背景图模仿底部边框或者使用div来模仿底部边框。

2.

css代码如下:

.wrapper{
width: 100%;
overflow: hidden;
position: relative;
background: #98f59e;
}
.box{
width: 250px;
padding: 20px;
padding-bottom: 220px;
margin-bottom: -200px;
margin-left: 20px;
float: left;
display: inline;
background: #89ac10;
border: 2px solid red;
}
.bottom{
position:absolute;
bottom:;
height: 2px;
width: 290px;
background: red;
margin-left: -20px;
}

运行结果如下:

3.flex弹盒布局法:(简单-推荐)

css代码如下:

.wrapper{
width: 100%;
display: flex;
background: #98f59e;
align-items: stretch;
}
.box{
width: 250px;
margin-left: 20px;
background: #89ac10;
}

运行结果如下:

4.设置display值为table-cell

css代码如下:

.wrapper{
width: 100%;
background: #98f59e;
}
.box{
width: 250px;
background: #89ac10;
display: table-cell;
border: 1px solid red;
/*margin 无效*/
}

在此设置margin值是不起作用的,运行结果如下:

两栏自适应布局:

HTML代码如下:

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

1.浮动布局:

css代码如下:

.left{
float: left;
width: 300px;
height: 400px;
background: #41d844;
}
.right{
margin-left: 310px;
height: 400px;
background: #41d800;
}

运行结果如下:

2.绝地定位布局:

css代码如下:

.left{
position: absolute;
margin-right: -100%;
width: 300px;
height: 400px;
background: #925;
}
.right{
margin-left: 310px;
height: 400px;
background: #41d800;
}

运行效果如下:

三栏自适应布局:

1.float+负margin实现

HTML代码如下:

<div class="container">
<div class="center">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>

css代码如下:

.container{
width: 100%;
height: 300px;
float: left;
}
.center{
background: #16ea74;
height: 300px;
margin-left: 250px;
margin-right: 250px;
}
.left{
background: #16ea26;
float: left;
width: 200px;
height: 300px;
margin-left: -100%;
}
.right{
background: #16ea26;
float: left;
width: 200px;
height: 300px;
margin-left: -200px;
}

实现效果如下:

2.float方法:

HTML代码如下:

<div class="left">left</div>
<div class="right">right</div>
<div class="container">
<div class="center">center</div>
</div>

css代码如下:

.center{
background: #16ea74;
height: 300px;
margin-left: 250px;
margin-right: 250px;
}
.left{
background: #16ea26;
float: left;
width: 200px;
height: 300px;
}
.right{
background: #16ea26;
float: right;
width: 200px;
height: 300px;
}

运行效果如下:

与第一种方法差距在元素书写顺序上,左右浮动后脱离文档流设置中间元素margin左右值。

css实现等高布局 两栏自适应布局 三栏自适应布局的更多相关文章

  1. 如何用CSS实现左侧宽度固定,右侧自适应(两栏布局)?左右固定中间自适应(三栏布局)呢?

    在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...

  2. CSS布局:Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  3. 转:CSS布局:Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  4. 如何用CSS实现中间自适应,两边定宽三栏布局

    1.前言 用css实现“两边定宽,中间自适应的三栏布局”这个问题应该是在前端面试中被面试官提问到的高频问题了,一般当面试者写出一种实现方法之后,面试官还会问你还有没有别的方法,尽量多的写出几种实现方法 ...

  5. CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...

  6. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  7. CSS三栏布局

    一.绝对定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  8. CSS布局——三栏布局

    说到三栏布局,很多都会提到圣杯布局和双飞翼布局这两个经典的三栏布局方式.于是,我在网上搜了一些相关资料,阅读并跟着代码敲了一遍,发现在处理三栏布局上,他们采用的都是两边栏固定,中间栏自适应的策略.在处 ...

  9. 前端一面/面试常考题1-页面布局:假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应。

    题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. [题外话:日常宣读我的目标===想要成为一名优雅的程序媛] 一.分析 1. 题目真的像我们想得这么简单吗? 其实不然 ...

  10. 假设高度已知,请写出三栏布局,其中左栏、右栏各为300px,中间自适应的五种方法

    假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应的五种方法 HTML CSS 页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应 <!D ...

随机推荐

  1. php 在函数前面加个@的作用

    @是错误控制运算符,用屏蔽错误提示比如:@mysql_connect() 不会出现Warning, 而原来mysql_connect 会在页面上访提示Warning.主要是高版本的php不在支持mys ...

  2. Hadoop worldcount

    以前的公司和现在的公司,都用到了hadoop和hdfs.一直没入门,今天照着官网写了一个hadoop worldcount demo 1. hadoop是一个框架,什么是框架,spring是一个框架. ...

  3. Cookie介绍

    1.Http协议与Cookie Cookie(小量信息)是HTTP协议指定的!先由服务器保存Cookie到浏览器,而下次浏览器请求服务器时把上一次请求得到Cookie再归还给服务器 由服务器创建保存到 ...

  4. 用Jq遍历一个div里面的所有input 并判断是否为空?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 关于js的两个函数

    注:这两个函数结合其他主要实现异步的默认checkbox选中和其他选中,从php页面穿过来已经选中的值,用jQuery 回绑:关键点在于$.each(),遍历,再用$.attr() 回绑:第二步关键点 ...

  6. PDO drivers no value in Windows 或 ndefined class constant 'MYSQL_ATTR_USE_BUFFERED_QUERY'

    把办公室的drupal7.54版本放到自己的笔记本(OS:Windows10 Pro,php:7.0.9,mysql 5.7.11,apache:2.4)上运行不了,查看了各项配置应该没问题啊.之前还 ...

  7. VS2013中使用Git建立源代码管理

    原文:http://blog.csdn.net/bodybo/article/details/38976549/ 第一次在VS2013中使用Git,也是第一次使用git,各种不熟悉.百度各种使用经验, ...

  8. Android 弹出框Dialog并缩放图片

    java代码 Activity: // 调用dialog,参数:1:自身的activity,2:Bitmap bm读取好的图片 MyDialog dialog = new MyDialog(MyAct ...

  9. java 简单工厂 工厂模式

    <Head First 设计模式>学习中 分类 简单工厂模式(Simple Factory) 工厂方法模式(Factory Method) 抽象工厂模式(Abstract Factory) ...

  10. bootstrap-table sum总数量统计

    写了一个分页要显示数据中所有金额的总数  但是使用 footerformatter  却不知道该怎么赋值   没办法只能放到页脚了 先上个效果图: 这样做要修改源码: bootstrap-table. ...