三栏布局

最新推荐文章于 2025-04-23 16:13:13 发布

weixin_30412577

最新推荐文章于 2025-04-23 16:13:13 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhuhuoxingguang/p/6343297.html

移动端的一个小需求：

就是这么一个三列的布局，但是与我们经常讨论的圣杯布局或者说双飞翼布局还略有不同，不同点在于第三块区域，我们这个需求里面宽度是变动的，完整描述一下：

三块区域，整体宽度需要自适应，区块一定宽、区块二是随着整体宽度的变化而变化、区块三有两三种不同宽度的可能性。

由于是早期、并非本人接手的项目，最近发现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布局的特性。

　　这么做完美解决了需求问题，而且是任何一区块都可以任意变动。

转载于:https://www.cnblogs.com/zhuhuoxingguang/p/6343297.html