css布局的相关几个难点

前几天被问的一种布局方式,三列布局左右两列固定宽度,中间一列自适应的布局方案:

1.当然css3里面的flex是可以实现这种情况的,但是这个属性实在是兼容性太差,这里就说一种自己查的普适方案;

2.当时第一次看到这个题目的时候我想到的是float的方式,可是后来一想不行啊,浮动的话中间不能自适应啊,因为页面宽度降低,浮动的元素就会被挤压到下一层:废话少说这里的解决方案是,左右两列使用绝对定位的两边,中间元素使用百分比布局,然后再加上margin-left=左边元素的宽度,margin-right=右边元素的宽度,或者是使用padding-left和padding-right;

3、使用浮动其实也是可以的,刚才一百度,发现鑫旭大神的方案float+margin=clear:both也是可以的,自己思维太死板了。

4、flex方案的总觉的有自己的一些瑕疵或者得加上很多限制比如:http://www.111cn.net/cssdiv/css/77415.htm,对了,差点忘了js也是可以控制的。

ps:

鑫旭大神:http://www.zhangxinxu.com/wordpress/2009/11/%E6%88%91%E7%86%9F%E7%9F%A5%E7%9A%84%E4%B8%89%E7%A7%8D%E4%B8%89%E6%A0%8F%E7%BD%91%E9%A1%B5%E5%AE%BD%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95/

其实这个解决方案是受到了另外一个布局方案的启发的,高度自适应div,有一个高度固定100px,另一个自适应高度,该如何实现?

这里我就不班门弄斧了,直接贴上答案:https://segmentfault.com/q/1010000000762512/a-1020000000762933

我的理解:1、方法和上面的三列相同

2、使用border-sizeing+绝对定位

时间: 2024-11-09 02:11:32

css布局的相关几个难点的相关文章

CSS布局相关概要

一.文档流 运用css布局首先要具备一些概念上的知识,文档流的概念充斥着布局的整个过程.浏览器渲染页面是有先后顺序的,其顺序是至上而下,根据HTML的文档结构进行渲染. 二.div+css 耳熟能详的div+css布局指的是:仅用容器标签div配合css样式进行布局.以往的table布局是不推荐使用的. 三.display: none / block/ inline / inline-block 设置元素的显示方式,以上为常见的取值.这是布局中非常重要的概念 block块元素:独自占据一行的元素

CSS布局——左定宽度右自适应宽度并且等高布局

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受.那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧: 左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样.但是你仔细看后你会觉得不是那么回事: 左边固定,右边自适应布局,

深度理解div+css布局嵌套盒子

1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CSS定位以及设置显示效果,最后在每个块中添加相应的内容.利用CSS排版方法更容易地控制页面每个元素的效果,更新也更容易,甚至页面的拓扑结构也可以通过修改相应的CSS属性来重新定位.  2. 盒子模型 盒子模型是CSS控制页面元素的一个重要概念,只有掌握了盒子模型,才能让CSS很好地控制页面上每一个元素,达到我们

【学习笔记】bootstrap之CSS布局

CSS布局 1)使用Bootstrap的时候,所有的HTML文件都需要在其 顶部引用HTML5的DOCTYPE属性, <!DOCTYPE html> <html lang=“en”> … </html> 2)新版Bootstrap是一个移动先行的框架集,移动先 行的影子在整个框架集都可以发现,在移动设备浏览器上,通过为viewport meta标签添加的 user-scalable=no可以禁用其缩放(zooming)功能.禁用缩放 功能后,用户只能滚动屏幕 . 3)B

(转)Div+CSS布局入门

在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图. 下面,我们需要根据构思图来规划一下页面的布局

CSS 布局整理

1.css垂直水平居中 效果: HTML代码: <div id="container"> <div id="center-div"></div> </div> CSS实现: 都设置居中 div块的宽高和背景色. #center-div { width: 100px; height: 100px; background: #2b669a;} a.用inline-block和vertical-align来实现居中: #co

div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)

在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定死图片大小(宽度 高度),这个时候如果图片相对于这个位置不是等比例大小,那么这张图片就会变形,让图片变的不清晰,这个时候想让图片不变形又按比例缩放,如何解决?CSS图片缩小不变形,图片自动缩小,图片按比例等比例缩小不变形解决. 解决方法有两种: 第一种,让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形. 比如淘宝,要求店铺主上传

CSS样式及相关的选择器的介绍和区别

1.CSS样式作用:用于控制页面显示的方式和布局(定义html元素展示的方式),美化界面,将内容与表现分离,便于维护和扩展: 2.CSS样式的相关的选择器包括: A. html选择器:如:p{color:red;} B. ID选择器:如:#div1{font-size:14px; text-align:left;} C. 类选择器: 如: .tr{width:15%; font-weight:bold;} D. 属性选择器:属性选择器是对指定属性的html元素设置相关的样式:(该选择仅适用于IE

基于display:table的CSS布局

当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS布局技术的结束,同时也给了HTML表格布局致命一击.最终,使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单.网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性.我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响. 使用CSS表格 CSS表格