时间戳

首页 > 解决方案 > 无法将 CSS 中的列调整为 50% 的高度

css - 无法将 CSS 中的列调整为 50% 的高度

问题描述

出于某种原因，我不能使用 CSS 来调整左列的大小，使其具有 50% 高度的两个精确部分。

我已将 div 顶部和底部的高度设置为 50%。

左边的两个 div 也需要是右边图像的确切高度。

如何在 CSS 中做到这一点？

在此处输入图像描述

我试图通过网格来做到这一点。同样的问题，当我将行强制为 50% 时，文本只会在该区域之外流血。

在此处输入图像描述

我现在创建了一个示例代码来显示问题

    <body>
    <div class="section-8">
        <div class="div-block-230">
            <div class="div-block-233">
                <div>
                    Duis in tellus velit. Mauris vel nunc ac mi imperdiet imperdiet. Suspendisse ultrices Lorem ipsum dolor sit Duis in tellus velit. Mauris vel nunc ac mi imperdiet imperdiet. Suspendisse ultrices Lorem ipsum dolor sitDuis in tellus velit. Mauris vel nunc ac mi imperdiet imperdiet. Suspendisse ultrices Lorem ipsum dolor sitDuis in tellus velit. Mauris vel nunc ac mi imperdiet imperdiet. Suspendisse ultrices Lorem ipsum dolor sitDuis in tellus velit. Mauris vel nunc ac mi imperdiet imperdiet. Suspendisse ultrices Lorem ipsum dolor sitDuis in tellus velit. Mauris vel nunc ac mi imperdiet imperdiet. Suspendisse ultrices Lorem ipsum dolor sit
                    <br/>
                </div>
            </div>
            <div class="div-block-234">
                <div>This is some text inside of a div block.</div>
            </div>
        </div>
        <div class="div-block-231"></div>
        <div class="div-block-232"></div>
    </div>       
</body>

这是CSS

.div-block-230 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 40%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.div-block-231 {
    width: 20%;
    min-height: 300px;
    background-color: #06c;
}

.div-block-232 {
    width: 40%;
}

.div-block-233 {
    height: 50%;
}

.div-block-234 {
    height: 50%;
}

当您缩小浏览器宽度时，您可以看到 thp 框中的文本会溢出到底部框中

只是为了澄清要求：

  1. 左侧的两个框应始终为 50/50 拆分
  2. 右侧的图像应拉伸以适应左侧的文本高度
  3. 左边的文本不应该剪辑，框应该放大以适应文本

标签： css

解决方案

这可能有很多原因，例如 Html 文件的体系结构。你能和我们分享你的代码（html + css）吗？

同时，看看你的父标签的大小，他可能正在调整它的高度以适应它的孩子，这导致了这个问题（如果你需要你的显示器采用全屏尺寸，解决方法：将父标签的高度设置为 100vh）

推荐阅读