Css 如何在保持准确的div比率的同时阻止文本溢出到另一个div中？_Css

Css 如何在保持准确的div比率的同时阻止文本溢出到另一个div中？

css

Css 如何在保持准确的div比率的同时阻止文本溢出到另一个div中？,css,Css,我有以下要求左侧的两个框应始终50/50分开右侧的图像应拉伸以适应左侧的文本高度左边的文本永远不应该剪辑，框应该放大以适合文本现在的问题是顶部的文本像这样溢出到底部的div中我添加了示例代码来说明这个问题。第8节{ 显示：-网络工具包盒；显示：-webkit flex；显示：-ms flexbox；显示器：flex； -webkit盒方向：水平； -webkit盒方向：正常； -webkit柔性方向：行； -ms柔性方向：行；弯曲方向：行； } .分区-block-230

我有以下要求

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

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

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

现在的问题是顶部的文本像这样溢出到底部的div中

我添加了示例代码来说明这个问题

。第8节{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit盒方向：水平；
-webkit盒方向：正常；
-webkit柔性方向：行；
-ms柔性方向：行；
弯曲方向：行；
}
.分区-block-230{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
宽度：40%；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
}
.分区-block-231{
宽度：20%；
最小高度：300px；
背景色：#06c；
}
.div-block-232{
宽度：40%；
}
.分区-block-233{
身高：50%；
}
.分区-block-234{
身高：50%；
}


杜伊斯在泰勒斯·维利特。Mauris vel nunc ac mi的饮食不健康。乌尔特里斯-洛雷姆-伊普苏姆-多尔西-维利特二人组。Mauris vel nunc ac mi的饮食不健康。乌尔特里斯-洛雷姆-伊普苏姆-多洛-西杜瓦悬韧带。毛里斯·维尔努克
ac mi是一种饮食。乌尔特里斯-洛雷姆-伊普苏姆-多洛-西杜瓦悬韧带。Mauris vel nunc ac mi的饮食不健康。乌尔特里斯-洛雷姆-伊普苏姆-多洛-西杜瓦悬韧带。Mauris vel nunc ac mi的饮食不健康。
乌尔特里斯-洛雷姆-伊普苏姆-多洛-西杜瓦悬韧带。Mauris vel nunc ac mi的饮食不健康。乌尔特里斯-洛雷姆-同侧多洛-西特悬吊术


这是div块中的一些文本。

以下是我的解决方案：

css:

html:



杜伊斯在泰勒斯·维利特。Mauris vel nunc ac mi的饮食不健康。乌尔特里斯-洛雷姆-伊普苏姆-多尔西-维利特二人组。Mauris vel nunc ac mi的饮食不健康。乌尔特里斯-洛雷姆-伊普苏姆-多洛-西杜瓦悬韧带。Mauris vel nunc ac mi的饮食不健康。乌尔特里斯-洛雷姆-伊普苏姆-多洛-西杜瓦悬韧带。Mauris vel nunc ac mi的饮食不健康。乌尔特里斯-洛雷姆-伊普苏姆-多洛-西杜瓦悬韧带。Mauris vel nunc ac mi的饮食不健康。乌尔特里斯-洛雷姆-伊普苏姆-多洛-西杜瓦悬韧带。Mauris vel nunc ac mi的饮食不健康。乌尔特里斯-洛雷姆-同侧多洛-西特悬吊术


这是div块中的一些文本。

更新：

垂直对齐的文本框和添加的空div

CSS网格将很好地完成这项工作。布局将简化：

<div class="grid-container">
  <div>Top text block</div>
  <div>Bottom text block</div>
  <div>The right blue column</div>
</div>


Lorem ipsum dolor sit amet，是一位杰出的献身者。在爱神元素中的悬念。两个人在一起，一个人在一起，一个人在一起，一个人在一起，一个人在一起。这是一种饮食习惯。这是波苏尔的生活
这是div块中的一些文本。

我尝试在这里复制它，因为这样做更好。请复制您的案例对不起，我错过了一个css，编辑了高度：100%；去你的布洛克230班。这是可行的还是你想要的？试过了，但没有达到我想要的。阅读要求。它必须是50%你的文本框中只有一个？请把要求通读一遍，好吗。那么文本框应该垂直分割还是水平分割呢？顶部和底部，垂直文本框不是50%

<body>
  <div class="container">
    <div class="text-container">
      <p class="lorem-ipsum">
        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
      </p>
      <p class="text">
        This is some text inside of a div block.
      </p>
    </div>
   <div class="image-container">
     <div class="image"></div>
     <div class="empty-div"></div>
   </div>
 </div>
</body>

<div class="grid-container">
  <div>Top text block</div>
  <div>Bottom text block</div>
  <div>The right blue column</div>
</div>