时间戳

首页 > 解决方案 > 如何在下一行对齐两个相同高度的div和第三个div

html - 如何在下一行对齐两个相同高度的div和第三个div

问题描述

我需要在一列中显示图像（左侧）并在第二列（在右侧列）中显示一个按钮（在右侧列上）和描述。我得到了预期的结果，但是在移动视图中，我需要在左下角和右侧显示按钮，应该放置图像。描述列应该在下一行。

<div class="row">
    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-3 image-block">
        <img src="image.PNG" />
    </div>
    <div class="col-md-9 col-lg-9 col-sm-9 col-xs-9 button-block">
        <div class="category older-people">Button</div>
    </div>
    <div class="col-md-9 col-lg-9 col-sm-9 col-xs-12 text-block">
        <div class="address">Description Text Comes here</div>                                   
    </div>                                   
</div>

在此处输入图像描述

在移动视图中，按钮和图像应朝向底部对齐。如图所示。

标签： htmlcssflexbox

解决方案

如果我理解得很好，您需要在移动设备上重新排序您的元素吗？我建议你使用 flexbox：

.row {
    display: flex;
    flex-direction: row;
}
.image-block {
    order: 2;
}
.button-block {
    order: 1;
}
.text-block {
    order: 3;
    flex-basis: 100%;
}

使用flex-basis: 100%，您强制元素 100% 宽度。

这是您正在寻找的解决方案吗？

推荐阅读