移动端的一个小需求:
就是这么一个三列的布局,但是与我们经常讨论的圣杯布局或者说双飞翼布局还略有不同,不同点在于第三块区域,我们这个需求里面宽度是变动的,完整描述一下:
三块区域,整体宽度需要自适应,区块一定宽、区块二是随着整体宽度的变化而变化、区块三有两三种不同宽度的可能性。
由于是早期、并非本人接手的项目,最近发现bug,修改到这里的时候,才发现问题所在。
因为这是一个列表,存在多个相同的布局,所以之前同事的布局是这样的:
<ul class="list"> <li> <div class="icon-l"></div> 三星今日公布Note7爆炸原因 或带来“重生”? <span>2017-01-23</span>
</li>
</ul>
设置样式.icon-l左浮动,span右浮动,然后让文字以类似于设置文字绕排的方式,区块二的文字通过js截取字符串,保持在一行显示。
总感觉这种解决方案并不是很好,一个是区块三没办法任意更改宽度,第二就是区块二的文字问题,本来css可以实现的,却选择了js来实现。
所以自己考虑了一个方案:
html布局如下:
<ul class="list"> <li> <img class="icon" src="../images/1.jpg" alt=""> <h2>三星今日公布Note7爆炸原因 或带来“重生”?</h2> <span>2017-01-23</span> </li> </ul>
单看布局,并没有太大变化,主要变化在于之前完全暴露在li内部的文字,我用h2标签包裹起来了。
css属性设置如下:
.icon{ width: 1.2rem; height: 0.8rem; object-fit: cover; } .list li{ display: -webkit-flex; } .list h2{ font-size: 0.28rem; flex: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding:0 0.2rem; } .list li span{ font-size: 0.2rem; line-height: 2; background: #f1f1f1; }
再回头看下,并没有什么特殊的属性,以及难以理解的用法。前提是了解flex布局的特性。
这么做完美解决了需求问题,而且是任何一区块都可以任意变动。