如上图，是项目中经常会碰到的情况，采用浮动布局，因为文本内容是不可控制的所以导致外层元素（蓝色）高度不一致，结果第三个元素没有如希望的那样出现在第一个元素下面，最终出现这种参差不齐的效果界面。 以上问题的解决办法，可以给文本固定高度，超出出现省略号，或者还可以使用js计算三个外层容器高度并取 ...

　　今天遇到一个现象，设置了 position:fixed; 但是发现其行为却随文档流滚动，而不是相对于 viewport 固定在某处，所以查了一下，发现是个知识点。 一、现象背景 　　我理解的fixed元素是这样的：摘自 CSS布局基础 固定定位与absolute定位类型类似，但它 ...

position:fixed是对于浏览器窗口定位的，要实现相当于父元素定位，可以这样： 不设置fixed元素的top，bottom，left，right，只设置margin来实现。 这种方法本质上fixed元素还是相当于窗口定位的，实现效果上是相对于父元素定位。 此外，position ...

费话不多说，直接上问题： 1.开始时，页面只有两个DIV的嵌套（见图） 运行结果是： 现在看运行的是正常的，但是当我设置让 class="box2" 的DIV浮动时 运行结果 ...

问题：fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响。 解释：层叠关系是受层叠上下文影响的。文档中的层叠上下文由满足以下任意一个条件的元素形成： 根元素 (HTML), 绝对（absolute）定位或相对（relative）定位 ...

当最外面的层想要设置一个 overflow: hidden，但子元素又想他们能滚动，像今日头条的滚动导航一样： html： css： 这样写里面的子元素 scroll的宽度就可以随着li的增加减少而改变，在这里引用iscroll可以向右滑动 ...

直接添加`width: max-content;`声明就 OK，之前太单纯了。 * * * 最近碰见这样一个需求，要让图片横向排列设置 x 方向的滚动条滚动查看，原本当直接创建一个 IFC（inline，float 什么的）就解决了，搞了半天发现搞不定（IFC 也是不能父元素宽度自适应子元素宽度 ...

position:fixed默认是相对浏览器定位的 原理：fixed定位相对父级容器定位，不添加:top,bottom,left,right样式,通过margin定位 代码：http://jsbin.com/tegodideyi/edit?html,css,output HTML布局 ...