在响应图像旁边垂直对齐几格

问题描述 投票:0回答:1

我有一行,其中两列。左边是一张图片。在右侧,三个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的示例”>>

<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="{
                                &quot;1&quot;:2,
                                &quot;2&quot;:&quot;<?php echo get_post_meta(
                                    $post->ID, 
                                    'rehub_offer_product_desc', 
                                    true
                                );?>&quot;
                            }" 
                            data-sheets-userformat="{
                                &quot;2&quot;:513,
                                &quot;3&quot;:[null,0],
                                &quot;12&quot;: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:第一个具有可变长度的文本,第二个具有固定的元素,第三个具有仅可见的图像...

html css flexbox responsive
1个回答
0
投票

您需要在第二个容器上设置以下CSS:

© www.soinside.com 2019 - 2024. All rights reserved.