无法将CSS中的列大小调整为正好50%的高度_Css

无法将CSS中的列大小调整为正好50%的高度

css

无法将CSS中的列大小调整为正好50%的高度,css,Css,出于某种原因，我不能使用CSS来调整左列的大小，使其具有两个精确的50%高度的部分我已经将div顶部和底部的高度设置为精确的50% 左侧的两个div也必须是右侧图像的精确高度如何在CSS中实现这一点我试图通过网格来实现这一点。同样的问题，当我强制行数为50%时，文本只会在区域外出血我现在创建了一个示例代码来显示这个问题 <body> <div class="section-8"> <div class=

出于某种原因，我不能使用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>

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

只是为了澄清要求：

左侧的两个框应始终50/50分开

右侧的图像应拉伸以适应左侧的文本高度

左边的文本永远不应该剪辑，框应该放大以适合文本

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

同时，查看父标签的大小，他可能会根据其子标签调整其高度，从而导致此问题（如果您需要全屏显示，请解决此问题：将父标签的高度设置为100vh）

能否在片段中提供一个？我添加了示例代码我添加了示例代码你能看一下吗？

.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%;
}