<div>
<div>***</div>
<div>***</div>
<div>***</div>
<div>***</div>
<div>***</div>
</div>the figure is as follows:
I am currently writing based on the table property of display.
but cannot set the width.
<div>
<div>***</div>
<div>***</div>
<div>***</div>
<div>***</div>
<div>***</div>
</div>the figure is as follows:
I am currently writing based on the table property of display.
but cannot set the width.
.c-box{
width: 400px;
margin: 0 auto;
overflow: hidden;
}
.c-left{
background: -sharpccc;
}
.c-right{
background: -sharpf3f3f3;
}
.c-left,.c-right{
margin-bottom: -9999px;
padding-bottom: 9999px;
width: 200px;
float: left;
}
<div class="c-box">
<div class="c-left">
fdsfdsf
fdsfdsf
fdsfdsf
fdsfdsf
fdsfdsf
</div>
<div class="c-right">
fsdfsdf
</div>
</div>Zhang Xinxu's great method compatibility is very good. You can try it
. you can try to divide the card into two layers, the bottom of which contains a red border. Make use of the two features of absolute to keep it at the bottom (do not declare that left will default to static position , and let the parent element position keep static so that it does not act as position container).
Proof of concept ideas for reference:
https://codepen.io/straybugs/.
use the flex layout
to set a percentage of the height of the div inside to adapt to the height of the parent element.