两列等高布局在项目中的应用

「爱情、让人受尽委屈。」 2023-05-29 05:03 7阅读 0赞

## 遇到的问题 ##

最近开发一个小型项目，项目只有两个页面，一个主页面，一个列表页面。项目使用的是vue技术栈，在开发页面的组件是遇到了一个布局问题，布局如下：  
![在这里插入图片描述][20191104105255571.png]  
要求：  
1.外部容器的高度由图片决定  
2.图片的宽度固定，右侧元素分配剩余空间  
3.右侧元素的高度于图片的一样高  
4.右侧上方文字不固定，但是最多不超过两行，下方文字总是位居底部

## 分析问题 ##

由上面的要求可以得出以下结论：  
1.这是一个两列等高布局  
2.右侧是一个垂直方向的两端对齐布局  
3.需要多行文本溢出

我们看一下这些问题的常见解决方案：

**常见的两列等高布局解决方法**  
1.**flex布局**

<div class="demo1 demo">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

.demo {
        background-color: aliceblue;
    }
    
    .demo .left {
        width: 100px;
        height: 100px;
        background-color: aquamarine;
    }
    
    .demo .right {
        background-color: chartreuse;
    }
    
    .demo1 {
        display: flex;
        align-items: stretch;
    }
    
    .demo1 .right {
        flex: 1;
    }
    
    .demo1 .left {
        flex-shrink: 0; /*固定宽度*/
    }

缺点: IE9及IE9以下版本不支持flex属性  
优点：实现方便，还可以方便实现各种比例

2.**使用margin和padding正负抵消**

<div class="demo2 demo">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

.demo {
        background-color: aliceblue;
    }
    
    .demo .left {
        width: 100px;
        height: 100px;
        background-color: aquamarine;
    }
    
    .demo .right {
        background-color: chartreuse;
    }
    
    .demo2 {
        overflow: hidden;
    }
    
    .demo2 .left,
    .demo2 .right {
        float: left;
        margin-bottom: -9999px;
        padding-bottom: 9999px;
    }
    
    .demo2 .right {
        float: right;
        width: calc(100% - 100px);
    }

优点：兼容所有浏览器  
3.**table布局**

<div class="demo3 demo">
        <div class="left">left</div>
        <div class="right">right<br/>right</div>
    </div>

.demo {
        background-color: aliceblue;
    }
    
    .demo .left {
        width: 100px;
        height: 100px;
        background-color: aquamarine;
    }
    
    .demo .right {
        background-color: chartreuse;
    }
    
    .demo3 {
        display: table;
        width: 100%;
    }
    
    .demo3 .left,
    .demo3 .right {
        display: table-cell;
    }

缺点: IE8及IE8以下版本不支持display:table属性，但是都9021年了，当然没问题啦！  
优点：实现方便，还可以方便实现各种比例

**效果图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhYnVsb25nYm8_size_16_color_FFFFFF_t_70]

**垂直方向的两端对齐布局的解决方案**

1.**使用绝对定位**

.demo {
        width: 300px;
        height: 100px;
        margin: auto;
        background-color: aliceblue;
    }
    
    .demo .left {
        background-color: aquamarine;
    }
    
    .demo .right {
        background-color: chartreuse;
    }
    
    .demo1 {
        position: relative;
    }
    
    .demo1 .right {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
    }

优点：兼容所有浏览器

2.**使用flex+write-mode**

.demo {
        width: 300px;
        height: 100px;
        margin: auto;
        background-color: aliceblue;
    }
    
    .demo .left {
        background-color: aquamarine;
    }
    
    .demo .right {
        background-color: chartreuse;
    }
    
    .demo2 {
        display: flex;
        justify-content: space-between;
        writing-mode: vertical-rl;
    }
    
    .demo2 .left,
    .demo2 .right {
        writing-mode: horizontal-tb;
    }

缺点：存在兼容性问题，难以理解  
优点：思路新奇

3.**使用float+write-mode**

.demo {
        width: 300px;
        height: 100px;
        margin: auto;
        background-color: aliceblue;
    }
    
    .demo .left {
        background-color: aquamarine;
    }
    
    .demo .right {
        background-color: chartreuse;
    }
    
    .demo3 {
        overflow: hidden;
        writing-mode: vertical-rl;
    }
    
    .demo3 .left,
    .demo3 .right {
        min-width: 100%;
        writing-mode: horizontal-tb;
    }
    
    .demo3 .left {
        float: left;
    }
    
    .demo3 .right {
        float: right;
    }

缺点：存在兼容性问题，难以理解  
优点：思路新奇

**效果图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhYnVsb25nYm8_size_16_color_FFFFFF_t_70 1]

**常见的文本溢出解决方案**

1.**单行文本溢出**

<div class="demo demo1">
        <p class="content">文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出</p>
    </div>

.demo {
        width: 150px;
        background-color: aquamarine;
    }
    
    .demo1 .content {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

2.**css实现多行文本溢出**

<div class="demo demo2">
        <p class="content">文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出</p>
    </div>

.demo {
        width: 150px;
        background-color: aquamarine;
    }
    
    .demo2 .content {
        display: -webkit-box; /*对象作为弹性伸缩盒子模型显示*/ 
        -webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/ 
        -webkit-line-clamp: 2; /*溢出省略的界限*/
        overflow: hidden; /*设置隐藏溢出元素*/
    }

缺点：存在兼容性问题，难以理解  
优点：实现简单

3.**after + position实现多行文本溢出**

<div class="demo demo3">
        <p class="content">文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出</p>
    </div>

.demo {
        width: 150px;
        background-color: aquamarine;
    }
    
    .demo3 {
        position: relative;
        height: 3em;
        overflow: hidden;
    }
    
    .demo3 .content {
        margin: 0;
        line-height: 1.5em;
    }
    
    .demo3:after {
        content: '...';
        position: absolute;
        right: 0;
        bottom: 0;
        padding-left: 38px;
        background: linear-gradient(to right, transparent, aquamarine 62%);
    }

缺点：效果不好，且需要计算高度和行高  
优点：实现简单，兼容性问题不大

4.**js实现多行文本溢出**

<div class="demo demo4">
        <p class="content">文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出</p>
    </div>

/**
    * 判断是否是DOM对象
    * @param {Object} elem 要判断的对象
    */
    function isHTMLElement (elem = null) {
        if (HTMLElement) {
            return elem instanceof HTMLElement
        }
        return typeof elem === 'object' && elem.nodeType === 1 && typeof elem.tagName === 'string'
    }
    
    /**
    * 多行文本溢出
    * @param {Object} elem 要限制文本的dom容器对象
    * @param {Number} lines 限制显示的行数
    */
    function limitMultLines (elem = null, lines = 1) {
        // 文本容器对象必须是DOM对象
        if (!isHTMLElement(elem)) {
            throw new TypeError('limitMultLines() param: elem must be an instance of HTMLELement!')
        }
    
        // 限制显示的行数必须为正整数且大于0
        if (!Number.isInteger(lines) || lines <= 0) {
            throw new TypeError('limitMultLines() param: elem must be an integer and big than 0!')
        }
    
        /*
        * 1.获取文本容器的总高度
        * 2.获取单行文本是的高度
        * 3.获取高度比(总高度 / 单行高度)
        * 4.判断高度比是否大于限制的行数
        * 5.如果不是，则中断函数
        * 6.不断减少文本内容，直到当前文本容器的高度改变，则此时容器的高度等于总高度-1，而文本内容充满整个容器
        * 7.计算要显示的文本，(文本内容充满容器的数量 / 此时文本的行数) * 要显示的行数 - 1
        * 8.替换文本容器的文本
        */
        const content = elem.innerText
        const totalLineH = elem.offsetHeight
        elem.innerText = 'A'
        const onelineH = elem.offsetHeight
        elem.innerText = content
        const heightRatio = Math.ceil(totalLineH / onelineH)
        if (heightRatio <= lines) {
            return false
        }
    
        const contentLen = content.length
        let count = 1
        elem.innerText = content.slice(0, contentLen - count)
        while (elem.offsetHeight >= totalLineH) {
            elem.innerText = content.slice(0, contentLen - (++count))
        }
    
        const showText = content.slice(0, Math.floor(((contentLen - count) / (heightRatio - 1)) * lines - 1)) + '...'
        elem.innerText = showText
    }
    
    limitMultLines(document.querySelector('.demo4 > .content'), 2)

缺点：实现逻辑复杂，DOM操作频繁  
优点：实现简单，无兼容性问题

**效果图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhYnVsb25nYm8_size_16_color_FFFFFF_t_70 2]

## 问题的解决方案 ##

当前问题出现在移动端，所以兼容性问题可以放在最后考虑；  
两列等高布局选择flex布局还是table布局都行；  
垂直方向的两端对齐布局最好选第一种方案，因为writing-mode在iphone手机存在兼容性问题；  
多行文本溢出选择css实现还是js实现都行，但是推荐css，此方案简单，不会频繁操作DOM  
所以最后使用flex布局+绝对定位实现的垂直方向的两端对齐布局+css多行文本溢出

<div class="demo">
            <div class="left"><img class="img" alt="图片" /></div>
            <div class="right">
                <h3 class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</h3>
                <p class="text">文本文本文本文本</p>
            </div>
        </div>

.demo {
            display: flex;
            background-color: aliceblue;
        }
        
        .left {
            flex-shrink: 0;
            width: 100px;
            padding-top: 100px;
            position: relative;
            background-color: aquamarine;
        }
    
        .img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
        }
    
        .right {
            position: relative;
            background-color: chartreuse;
        }
    
        .title {
            margin: 0;
            display: -webkit-box; /*对象作为弹性伸缩盒子模型显示*/ 
            -webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/ 
            -webkit-line-clamp: 2; /*溢出省略的界限*/
            overflow: hidden; /*设置隐藏溢出元素*/
        }
    
        .text {
            margin: 0;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhYnVsb25nYm8_size_16_color_FFFFFF_t_70 3]

[20191104105255571.png]: https://img-blog.csdnimg.cn/20191104105255571.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhYnVsb25nYm8_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191104110614661.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhYnVsb25nYm8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhYnVsb25nYm8_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191104110719531.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhYnVsb25nYm8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhYnVsb25nYm8_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191104110800772.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhYnVsb25nYm8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhYnVsb25nYm8_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191104110906914.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhYnVsb25nYm8=,size_16,color_FFFFFF,t_70