时间戳

首页 > 解决方案 > 右栏应与左栏一样高

css - 右栏应与左栏一样高

问题描述

我想要一个div包含两列，其中左侧包含文本，右侧包含图像。图像的高度应由文本的长度决定。图像不应超过视口宽度的 40%，并且不应超过文本的高度。没有以固定数量的像素给出大小。

这是我到目前为止想出的（我在这里将其剥离，因此出于移动视图的原因，右列必须先出现，因为在移动视图中，图像显示在文本上方）：

的CSS：

.my_list_item_container {
    clear: both;
    justify-content: space-between;
    border-bottom: 1px solid #d8d8d8;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.my_list_item_container_flex {
    display: flex;
    flex-direction: column;
}

.my_list_item_left_column {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

.my_list_item_right_column {
    float: right;
}

的HTML：

<div class="my_list_item_container my_list_item_container_flex">
    <div class="my_list_item_right_column">
        <img src="example.png">
    </div>
    <div class="my_list_item_left_column">
        Lorem ipsum...
    </div>
</div>

并且有一个JS函数附加到事件resize事件中window。我认为有必要使用 JavaScript 来处理这个问题，但也许纯 CSS 解决方案是可能的（我没有找到任何解决方案，但我对 CSS 不太熟悉）：

function my_item_resize(event) {
    let containers = document.querySelectorAll(".my_list_item_container")
    for (let container of containers) {
        let leftcol = container.querySelector(".my_list_item_left_column")
        let rightcol = container.querySelector(".my_list_item_right_column")
        container.style.height = leftcol.offsetHeight + "px" 
    }
}

所以，它应该看起来像这样，X 应该是图像：

+--------------------+-------+
| Lorem ipsum dolor  | XXXXX |
| sit amet consecutor| XXXXX |
| libit aurum est.   | XXXXX |
+--------------------+-------+

如果图像的比例较窄，则应按比例缩小到文本高度，而不是如下所示：

+--------------------+-------+
| Lorem ipsum dolor  | XXXXX |
| sit amet consecutor| XXXXX |
| libit aurum est.   | XXXXX |
|                    | XXXXX |
|                    | XXXXX |
+--------------------+-------+

标签： cssresponsive

解决方案

推荐阅读