水平方向两列三列自适应布局

<html>
    <!--三列水平居中-->
    <div style="float:right;background-color:blue;width:100px;height:100px;"></div>
    <div style="float:left;background-color:lightgray;width:100px;height:100px;"></div>
    <div style="background-color:red;height:100px;margin-left:100px;margin-left:100px;"></div>

    </br>
    <!--两列，右浮动-->
    <div style="float:right;width:100px;height:100px;background-color:blue"></div>
    <div style="background-color:red;height:100px;margin-right:100px;"></div>

    </br>
    <!--两列，左浮动-->
    <div style="float:left;width:100px;height:100px;background-color:blue;"></div>
    <div style="background-color:red;height:100px;margin-left:100px;"></div>
</html>

演示在这里：http://jsfiddle.net/3s6e2qmr/

<html>
    <!--垂直方向三列布局-->
    <body>
    <div style="width:100%;height:100px;position:absolute;background-color:blue;"></div>
    <div style="width:100%;height:100px;position:absolute;bottom:0;background-color:green;"></div>
    <div style="width:100%;position:absolute;top:100px;bottom:100px;background-color:red;"></div>
    </body>
</html>

演示在这里：http://jsfiddle.net/5vbtus2o/

时间： 2024-07-29 23:06:38

水平方向两列三列自适应布局的相关文章

两栏三栏自适应布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html,body{width:100%;height:100%;overflow:hidden;} html{_height:auto;_padd

JSTL FOREACH循环每行两和三列的显示方法

1 //两列的 2 <c:forEach var="bean" items="${result}" varStatus="status"> 3 <c:if test="${status.count%2==1}"> 4 <tr> 5 </c:if> 6 <td><b>$...{bean.id}</b>:$...{bean.name}</td

常用的有三种方式: 1.绝对定位法(最易理解) 左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离.于是实现了三栏自适应布局. 1 <html> 2 3 <head> 4 5 <title>三栏自适应布局</title> 6 7 <style type="text/css"> 8 9 html,body{ 10 11 margin:0; 12 13 height:100%; 14 15 }

使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年网易内推前端工程师面试的时候也被问到. 我这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和margin等属性进行布局这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法. 1).绝对定位法绝对定位法原

（转转转）使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年网易内推前端工程师面试的时候也被问到. 我这里主要分为两大类,一类是基于position传统的实现,一类是基于CSS3新特性弹性盒模型布局实现. 1. 基于传统的position和margin等属性进行布局这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法. 1).绝对定位法绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin

CSS3之flexbox如何实现水平垂直居中和三列等高布局

最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西. 第一个css属性就没有看懂.于是乎,开始各种找资料,各种看书.这些天把对于css3伸缩布局盒(flexbox)模型的理解写成博文,目的是对flexbox做一个简单的介绍. 以下的内容会分为如下小节: 1.关于css3中flexbox需要掌握的概念 2.flexbox实现水平垂直居中对齐 3.三列等高自适应,页脚区域黏附底部的布局 1.关于css3中flexbox需要掌握的知识因为对于三列等高

3列、2列自适应布局，中部内容优先显示3列布局等方法

1. 固定宽度,中部DIV内容优先显示布局说明:这种布局一般常见与社交网站,例如QQ空间,朋友网等等,特点是把中部信息的内容放在前面显示,左侧菜单内容最后显示.实现方法:重点在于使用了margin-left:-960px;这样样式,如果能深入了解一下margin的负值和浮动原理就可以很好的理解此方法了.下面是demo: <!DOCTYPE><html><head> <meta charset="utf-8"> <tit

从三栏自适应宽度布局到css布局的讨论

如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就会自适应了,下面是一个实时的demo: left middle right 但是table布局是不推荐的,table布局是css流行之前使用的布局,有很多缺点:当table加载完之前,整个table的都是空白的,table将数据和排版参和在一起,使得页面混乱,并且table布局修改排版十分麻烦

我熟知的三种三栏网页宽度自适应布局方法

一.前言在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择.当然,具体实现不是那么容易,需要一定的css功力和实践经验.本文不讲细节,只讲外部的自适应架构,这也是实现整个页面自适应的前提.目前为止,我所熟知的左中右三栏宽度自适应于浏览器的方法有三个:绝对定位法,margin负值法以及自身浮动法.这些方法简洁实用,且无兼容性问题.如果您想在您的页面上使用流动性布局,相信本文给您一些启示的. 二.三种方法为了演示的需要,首先限定下示例的布局结构:左中右三栏布