Question

我有两列：左和右。我希望左列div匹配右列div的高度。可以在两个不同的div之间切换右列：红色和蓝色。

我想做的是使左列与右列的高度匹配。因此，如果蓝色div列为true，则左列div的高度将与蓝色div相同；如果红色列为true，则左列的高度将与红色div相同。

注意：除了红色和蓝色的div以外，还可以用作右列。

我遇到的问题是在rightColumn属性之前设置了左列div的高度。

var app = new Vue({
    el: '#app',
    data: function () {
        return {
            leftColStyles: { },
            blueLines: ['one', 'two','three'],
            redLines: ['one', 'two','three','four','five'],
            rightColumn: 'blue',
        }
    },
    methods: {
        matchHeight() {
            var heightString = this.$refs.infoBox.scrollHeight + 'px';
            Vue.set(this.leftColStyles, 'height', heightString); 
        },
        rightColumnToggle(color){
            this.rightColumn = color;
            this.matchHeight();
        },
    },
    mounted() {
        this.matchHeight();
    }

});

.columns{
  width:300px
}
.left-column {
  float:left; width:200px; 
  border:solid 1px black
}
.blue-right-column {
   float:right;
   border:solid 1px blue;
   background: blue;
 }
.red-right-column {
   float:right;
   border:solid 1px red;
   background: red;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <button @click="rightColumnToggle('blue')">Blue Column</button>
    <button @click="rightColumnToggle('red')">Red Column</button>
    <br>
    <div class="columns">
        <div class="left-column" id="context" v-bind:style="leftColStyles">
            <p>Some text</p>
        </div>
        <div v-if="rightColumn === 'blue'" class="blue-right-column" id="info-box" ref="infoBox"> 
            
            <ul>
                <li v-for="line in blueLines" v-text="line"></li>
            </ul>
        </div>

        <div v-if="rightColumn === 'red'" class="red-right-column" id="info-box" ref="infoBox"> 
            
            <ul>
                <li v-for="line in redLines" v-text="line"></li>
            </ul>
        </div>

    </div>

</div>

Answer 1

您实际上并不需要Vue.js代码来执行此操作。使用CSS Flexbox可以做到这一点：

<style>
    .columns {
        width:300px;

        /* USE CSS FLEXBOX */
        display: flex;

        /* This stretches the flexbox children to have max-height child */
        align-items: stretch;
    }

    .left-column {
        width:200px; 
        border:solid 1px black;
    }

    .blue-right-column {
        border:solid 1px blue;
        background: blue;
    }

    .red-right-column {
        border:solid 1px red;
        background: red;
    }
</style>

使用vue.js在另一个divs高度的切换上匹配div高度

1 个答案: