我有一行,其中两列。左边是一张图片。在右侧,三个div:第一个具有可变长度的文本,第二个具有固定的元素,第三个具有仅在台式机设备中可见的图像。
80%的时间,第一个div中的文本太短,以至于第二个和第三个div的高度小于左侧的图像。如何使第二个div和第三个div与图像的底部对齐?
这是我仅通过两个div获得的布局示例:
<style>
.row {
display: flex;
flex-wrap: wrap;
}
.flex-container1 {
display: flex;
flex-wrap: wrap;
align-content: start;
justify-content: center;
margin-left: 10px;
height: 80%;
}
.flex-container2 {
display: flex;
flex-wrap: wrap;
align-content: end;
justify-content: left;
margin-left: 10px;
height: 20%;
}
</style>
>>
<div class="row">
<!-- LEFT COLUMN -->
<div class="wpb_column
vc_column_container
vc_col-sm-6
vc_col-has-fill"
>
<a
href= "<?php echo get_post_meta(
$post->ID,
'rehub_offer_product_url',
true
);?>"
target="_blank"
rel="nofollow"
class="
vc_single_image-wrapper
vc_box_border_grey
"
>
<?php
WPSM_image_resizer::show_static_resized_image([
'thumb'=> true,
'crop'=> true,
'width'=> 800,
'height'=> 800,
'no_thumb_url' =>
get_template_directory_uri()
.'/images/default/noimage_765_460.jpg'
]);
?>
</a>
</div>
<!-- RIGHT COLUMN -->
<div class="wpb_column vc_column_container vc_col-sm-6">
<div class="flex-container1">
<div
id="wpsm-title-5b051fde62ff6"
class="
wpsm-title
big-size-title
left-align-title
under-title-line
"
>
<style scoped="">
#wpsm-title-5b051fde62ff6
h5{color:#020000;}
</style>
<h1>
<?php the_title(); ?>
</h1>
</div>
<article class="wpb_text_column post wpb_content_element ">
<div class="wpb_wrapper">
<p>
<span
data-sheets-value="{
"1":2,
"2":"<?php echo get_post_meta(
$post->ID,
'rehub_offer_product_desc',
true
);?>"
}"
data-sheets-userformat="{
"2":513,
"3":[null,0],
"12":0}"><?php echo get_post_meta(
$post->ID,
'rehub_offer_product_desc',
true);
?>
</span>
</p>
</div>
</article>
</div>
<div class="flex-container2">
<div style="width:100%">
<button
class="btn"
style="width:35%"
>
<?php echo get_post_meta(
$post->ID,
'rehub_main_product_price',
true);
?>
€
</button>
<a
href="<?php echo get_post_meta(
$post->ID,
'rehub_offer_product_url',
true);
?>"
title=""
target="_blank"
rel="nofollow"
>
<button
class="bounceIn"
style="width:65%"
>
<i class="far fa-grin-tears"></i>
LO VOGLIO!
</button>
</a>
</div>
</div>
</div>
</div>
我有一行,其中两列。左边是一张图片。在右侧,三个div:第一个具有可变长度的文本,第二个具有固定的元素,第三个具有仅可见的图像...
您需要在第二个容器上设置以下CSS: