针对用css做滑动门时遇到width问题的一点新的

最新推荐文章于 2021-08-03 19:03:14 发布

wlx200510

最新推荐文章于 2021-08-03 19:03:14 发布

阅读量338

点赞数

文章标签：前端滑动门

本文链接：https://blog.csdn.net/wlx200510/article/details/51399403

版权

滑动门的原理代码如下：

HTML部分：

<ul>
<li>
<a class="zbys" href="#">滋补养生</a>
<div><span>这是滑动门</span></div>
</li>

</ul>

CSS部分

li{ padding-left: 10px; padding-bottom: 10px; position:relative;

div{ width: 1000px; min-height: 470px; position: absolute; left:230px; top:0px; background: orange; display: none;}

ul li:hover div{ display: block;}/*本质就是一个div 鼠标滑动到li列表上时出现这个定位一般是根据li来定位的。*/

一好友在入门阶段发现用css做滑动门 div是溢出的定位关系，即相对定位的块元素完全在父元素外面。这个时候他用了min-width想让滑动门div随着内容扩展自适应，但是却发现设定的min-width变成了固定宽度，不论滑动门里面的嵌套div用什么处理，都会排成一列保持这个设定的最小宽度，虽然改成width设定可以解决，但没法实现这个随着内容增多自适应的想法，针对这一问题，做了以下探讨：

首先是改变父元素的宽度，发现这个滑动门的div实际宽度为父元素的宽度减去相对的left定位长度，也就是说按照滑动门的源码其实是0，这样就能解释发生的一切，如果默认宽度是0px，但又设置了最小宽度，那肯定以最小宽度为准，难怪里面的块都是成一列，因为宽度太小无法扩展开来，这样就需要把滑动门div的定位按照最外层宽度为100%的div来相对定位，此时父元素的宽度是100%，儿左侧的定位有限，那滑动门的默认width值便要大于最小宽度，从而内部浮动的块元素就拓展开来，问题解决。

但做深一步发现，如果已经做好的页面，实在不方便使用最外层的div来定位，比如li必需有position:absolute的属性该怎么办呢？由于不同的li的div滑动门内容不同，在结构上可能会导致冗杂，从而导致代码含义不容易理解，考虑到这一方面，于是找到了不改变HTML文件的解决方法如下：设置滑动门里面的div的display:inline-block，然后在滑动门div的css中增加设置 font-size:0(只是为了清除内部快元素之间的像素差，里面有文字在相应的块元素里面定义大小即可不影响) white-spacing:nowarp; 然后就能达到强制元素不换行的目的，效果上别无二致，可以自由根据块元素个数来拓展，但前提是这些块的高度要相同，才最接近滑动门的效果，小米网站的滑动门效果就是个例子，稍后把代码发出来，看看小米的顶部滑动门效果是怎么完成的。