情景描述：父元素由一个设置了高度的元素撑起，另一个元素自动继承父元素的高，并且两元素在一行显示。
现在情况
<style> 方法1： 设置父元素flex，子元素不设置高度 <style> 方法2： 父元素相当定位，子元素绝对定位，设置100%高 .far{ s1和s2元素都要设置inline或者inline-block属性，否则不法自动在一行，要在设置left，top等属性 龙丘居士亦可怜，谈空说有夜不眠。
.far{
border: 1px solid bisque;
}
.s1{
height: 150px;
width: 100px;
background-color: blue;
display: inline-block;
}
.s2{
height: 100%;
width: 50px;
background-color: brown;
display: inline-block;
}
style>
head>
<body>
<div class="far">
<div class="s1">div>
<div class="s2">div>
div>
body>
.far{
border: 1px solid bisque;
display: flex;
}
.s1{
height: 150px;
width: 100px;
background-color: blue;
display: inline-block;
}
.s2{
width: 50px;
background-color: brown;
display: inline-block;
}
style>
head>
<body>
<div class="far">
<div class="s1">div>
<div class="s2">div>
div>
body>
border: 1px solid bisque;
position: relative;
font-size: 0;
}
.s1{
height: 150px;
width: 100px;
background-color: blue;
display: inline-block;
}
.s2{
width: 50px;
background-color: brown;
display: inline;
position: absolute;
height: 100%;
}
style>
head>
<body>
<div class="far">
<div class="s1">div>
<div class="s2">div>
div>
body>
忽闻河东狮子吼，拄杖落手心茫然。
多有画面感
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有