1. 程式人生 > >CSS左側固定,右側自適應

CSS左側固定,右側自適應

DIV中左側若顯示,右側自適應到最大寬度。

左側不顯示時,右側自適應到100%

<template>
    <div class="row">
		<div class="card-left" v-show="isShow">
            左側固定內容
        </div>
	    <div class="card-right">
			右側自適應
		</div>
    </div>
</template>

<script>
export default {
     data(){
        return{
            isShow:true
        }
    },
    mounted(){
        this.getData();
    },
    methods:{
        getData(){
            //根據需要設定isShow
            this.isShow=false;
        }
    }

}
</script>

<style scoped>
    .row{display:flex;}
    .card-left{float:left;margin-right:10px;height:230px;width:410px;}
    .card-right{flex:1;}
</style>

 原文:https://www.cnblogs.com/yzhihao/p/6513022.html  我從這裡看到的,記錄一下,以防忘記