一个元素跟随兄弟元素高度自适应

不使用flex布局,使用table布局让左右两侧div元素高度一致。
exp:

.card{
    width: 100%;
    display: table;
    .table{
        display: table-row;
        width: 100%;    
        .left,.right{
            width: 70%;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .right{
            width: 30%;
            height: 150px;
        }
    }
}
### 回答1: 可以使用以下代码实现: ```css .parent { height: auto; /* 让父元素高度自适应 */ } .child { height: 100%; /* 让子元素高度跟随元素自适应 */ } ``` 在这里,`.parent` 是父元素的类名,`.child` 是子元素的类名。你需要确保在 HTML 中给父元素和子元素都加上了这些类名。 注意,如果父元素高度是固定的,那么子元素高度也会跟随元素高度变化。 例如: ```css .parent { height: 200px; /* 父元素高度是固定的 */ } .child { height: 100%; /* 子元素高度也会跟随元素高度变化 */ } ``` 希望这能帮到你。 ### 回答2: 要实现父元素高度自适应,子元素高度跟随元素自适应,可以使用CSS的flex布局。 首先,为父元素添加以下样式: ```css .parent { display: flex; flex-direction: column; } ``` 上述代码将父元素设置为flex布局,并且设置主轴方向为竖直方向。 然后,为子元素添加以下样式: ```css .child { flex: 1; } ``` 上述代码中的`flex: 1`表示子元素会占据父元素剩余的空间,从而实现子元素高度跟随元素自适应。 最后,将父元素和子元素高度设置为100%: ```css html, body, .parent, .child { height: 100%; } ``` 上述代码中的`html, body`是为了确保整个页面都能够自适应高度,`.parent`和`.child`是为了使父元素和子元素高度都为100%。 以上就是实现父元素高度自适应,子元素高度跟随元素自适应的代码。 ### 回答3: 实现父元素高度自适应,子元素高度跟随元素自适应,可以通过以下CSS代码实现: 父元素样式: ```css .parent { display: flex; flex-direction: column; } ``` 子元素样式: ```css .child { flex-grow: 1; } ``` 以上代码中,父元素使用了flex布局,并设置了flex-direction为column,表示子元素会在垂直方向上从上到下排列。 子元素的样式中,使用了flex-grow: 1,表示子元素会占据剩余空间,使其高度跟随元素自适应。 通过以上代码,父元素高度自适应元素高度,同时子元素高度也会跟随元素自适应变化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值