什么是自适应宽度

  大概需求和情况是这样的.今天提交的代码自我感觉是比较好的一版了,代码质量和个人编程知识/经验等紧密相关,不求最好,但求better and better.在这里做一个总结文。

  当内容超出父级元素宽度,在未设置white-space:nowrap时会自动换行,设置了white-space:nowrap样式又不能关联到滚动条延伸的部分,解决方案如下:

  1、在父级元素添加white-space:nowrap属性;

  2、计算(每一行)内容宽度;

  a、将内容拆分,包括缩进、图片和文字。

  b、利用《又谈换行情况处理》中在body末尾添加非换行dom元素计算文字宽度。

  c、叠加拆分的小块宽度为总宽度。

  3、去掉父级元素的white-space:nowrap属性;

  4、取2中最大宽度,设置成父级元素的宽度(最好在该精确宽度的基础上增加6px-8px的宽度预留给滚动条,一是满足滚动条出现,二是也不会贴边)。

  该方法优点(与之前几种方案相比):

  1、宽度计算准确。

  2、性能稳定,没有之前循环“试探”的过程,遍历一遍节点即可完成。

  What's more, 工作总是在种种业务场景之下的,像上面解决的这个问题就是。

时间: 2024-08-04 09:52:04

什么是自适应宽度的相关文章

div三栏布局,右侧自适应宽度代码示例

div三栏布局,右侧自适应宽度代码示例以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

div+css横向三栏布局自适应宽度示例

div+css横向三栏布局自适应宽度示例以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

div+css右侧自适应宽度布局示例

div+css右侧自适应宽度布局示例 以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

自适应宽度的div+css示例

自适应宽度的div+css示例 以下是代码:<html> <head> <title>Nice and Free CSS Template 10</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="s

Javascript网页制作技巧:图片列表自适应宽度显示

文章简介:从事网页重构好几年了,Javascript能力一直比较菜,主要还是做得太少.为了提高这方面的能力,这段时间主动承担了一些这方面的工作,真心感到学习和积累的不易,不过时常伴随着一些解决问题之后的小小成就感又让人乐此不疲. 从事网页重构好几年了,Javascript能力一直比较菜,主要还是做得太少.为了提高这方面的能力,这段时间主动承担了一些这方面的工作,真心感到学习和积累的不易,不过时常伴随着一些解决问题之后的小小成就感又让人乐此不疲. 在近期一个项目中,遇到一个图片列表自适应宽度显示的

YUI网页布局:自适应宽度的输入框

YUI中有一种布局思想:栅格决定宽度,内容决定高度,今天讨论的是自适应宽度的输入框,先上代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>宽度自适应输入框</title> <link rel="stylesheet" href="http://yui.yahooapis.com/3.0.0/build/

CSS实现自适应宽度的菜单按钮效果代码

本文实例讲述了CSS实现自适应宽度的菜单按钮效果代码.分享给大家供大家参考.具体如下: 这是一款基于CSS打造的自适应宽度的按钮效果代码,本效果你可以说它是菜单,也可以说它是一个CSS按钮的写法实例,不知你是否发现,菜单项的长宽可以自适应文字的多少,文字越多,它就越长,文字越少,它就越短,很智能吧.像这种可以自适应的菜单,其实用性大大增强,而且代码也挺简洁,分享给大家参考. 运行效果截图如下: 具体代码如下:   代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//D

CSS如何给一个绝对定位的元素设定自适应宽度

  像div这样的块元素在默认定位下你是不用担心它在页面上自适应宽度的问题的,但是一旦它使用了绝对定位,它就不会乖乖的填满你需要的宽度了. 那么,这个时候我们应该怎么办呢? 答案是用left和right来处理. 我们只需要给DIV设定样式 left: 0; right: 0; 你的div就会像你需要的那样实现自适应了.

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

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

javascript实现youku的视频代码自适应宽度

         这篇文章主要介绍了javascript实现youku的视频代码自适应宽度的方法的示例,十分的简单实用,有需要的小伙伴可以参考下.             由于是在网站编辑器里面编辑的内容,所以一直想通过CSS的方法来解决,可是找到的方式都有明显的缺陷,最终被迫采用脚本来控制列的高度,代码如下:           代码如下: <divstyle="text-align: center;"> <embedid="movie"src=