移动端两栏自适应布局

2024-10-21

css布局 - 两栏自适应布局的几种实现方法汇总

这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录简单粗暴float来实现 absolute"离家出走"定位过去圣杯布局 - margin负边距高贵优雅flex轻松搞定 table表示不服气,凭什么我要被抛弃衍生 - display:table-cell; pc端定死宽?那inline-block携手width也是个好方法 * 以下汇

利用float与overflow:hidden实现移动端两栏自适应布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-s

css实现等高布局两栏自适应布局三栏自适应布局

等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>...</h1> <p>...</p> <div class="bottom"></div> </div> </div> 1.padding补值法 css代码如下: .wrapper{ width: 100%;

两栏自适应布局，右侧div宽高不定

.main,.sitebar{ height: 300px; font: bolder 20px/300px "微软雅黑"; color: black; text-align: center; } .main{ width: 100%; float: left; } .main .content{ margin-left: 200px; background: red; } .sitebar

【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4588 一.开篇之言要说web上实现两栏自适应布局的方法,一双手都数不过来.不知大家有没有细想过,为什么这些方法可以实现自适应布局呢? 本文就将深入探讨下流体特性和BFC特性下的两栏自适应布局,还是

文字环绕和两栏自适应以及区域滚动插件iscroll.js

一.文字环绕效果:使用浮动 <div class="boxleft"></div> 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文

css多栏自适应布局

css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往可以完全控制.float适合模板布局,模板中填充的内容无法控制. 一.左侧尺寸固定右侧自适应 1.浮动实现在css浮动一文已介绍过. .left{ width: 150px; float: left; } /*流体布局*/ .right { margin-left: 150px;} 原理:左侧定宽

css 多栏自适应布局

在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师",我们应该需求一些优雅点的方法.先说说两栏布局,上例子: <div class='container' > <div class='div1' >1</div> <div class='div2' >2</div> </div> 如图,假如

你知道BFC、IFC、FFC、GFC及多栏自适应布局吗？

FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出的概念,其实就是定义了一套页面渲染的规则,决定了盒子以什么样的方式渲染从而占据什么样的位置区域,本文只是简单的学习笔记以供参考. 想要弄懂FC,首先得弄清楚盒子模型,常见的两种盒子模型为: IE盒子模型(怪异模式): width = content-width + padding-width + b

CSS深入理解流体特性和BFC特性下多栏自适应布局

一.块状元素的流体特性与自适应布局块状元素像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性. 来一个小实验: div { margin-left:100px: width:100%: } 此时发现,左侧永远100px留白,而div随着容器宽度变化而自适应变化了我们需要好好利用左侧100px的留白间距,岂不是就可以实现两栏自适应效果? 为了不影响原本的流体特性,我们可以使用破坏性属性,如浮动(float:lef

css 两列自适应布局的4种思路

前面的话前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和grid来介绍两列自适应布局的4种思路 float [思路一]float 在单列定宽单列自适应的两列布局中,经常用float和负margin配合实现布局效果.但由于margin取值只能是固定值,所以在两列都是自适应的布局中就不再适用.而float和overflow配合可实现两列自适应效果.使用overfl

BFC特性下多栏自适应布局

BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚.于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC. 一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS

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

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

css布局: 两栏自适应高度

只使用css实现有两种方式, 一种是通过相对定位,再绝对定位获取父亲元素的高度, 一种是通过margin-bottom:-999em;padding-bottom: 999em; 父亲元素超出隐藏 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head>

左右两栏div布局，高度自适应

页面结构如下: <div class="container"> <div class="left"> left </div> <div class="right"> right </div> </div> 需要这样的效果:左右两边高度有内容多少,自适应下面提供三种方式: 第一种: 使用display:table; .container { display: table; w

css两列自适应布局的多种实现方式及原理。

两列布局是非常常见的需求在实际项目中,实现的方式也有很多.究其原理也都不算复杂.这里主要提出几种实现方式和原理. html页面基本布局如下代码所示: 1 <div class="main"> 2 <div class='left'> 3 左侧 1 4 </div> 5 <div class='right'> 6 右侧 1 7 <div>假如div很多的话</div> 8 <div>假如div很多的话&l

移动端web app自适应布局探索与总结

要掌握的知识点: iphone6 屏幕尺寸为 375*667 (pt)也就是网页全屏显示时候 document.documentElement.clientWidth------可以理解为屏幕越大这个值越大(但是像素不一定高) dpr(设备独立像素):2.0 可用(window.devicePixelRatio)得出 (------------像素越高或者屏幕越小-------dpr越大) window.devicePixelRatio = 物理像素 / dips 屏幕分辨率为 750

移动端Web App自适应布局探索

1.困扰多时的问题在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 1136标准,所以高度一般取个大概值,各种图标的宽高也是取平衡值写死,然后部分样式通过媒体查询来设置,例如背景图的多倍图.基础字体大小.图标宽高. 这样做的弊端很明显: 做出来的页面在各种手机端看起来的物理大小(高度)是一样的,所以在大屏手机会觉得页面稍小,小屏手机页面稍大如果要使高度能更好的适应各种

css实现三栏自适应布局（两边固定，中间自适应）以及优缺点

方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左右两边元素的位置,也就是说margin-left = “左边元素的宽度” margin-right = "右边元素的宽度" 优点:三个div的顺序是任意的缺点:要对样式进行初始化,否则元素间会出现空隙,因为使用了absolute,如果页面还有其他内容处理时要小心! 注:随着浏览器窗口缩

CSS 三栏自适应布局

CSS布局这个很基础,方法也很多,要留意的知识点还是有一些. 比如IE6的触发layout *zoom:1 比如使用浮动后的清除浮动 clear:both 需求的延伸也会有一些: 比如三栏等高比如左栏或者右栏固定,就是position:fixed的运用,当然ie6不支持基本代码结构: <div class="con"> <div class="left"></div> <div class="main&q

移动端两栏自适应布局

热门专题