无法让 div 与 css 正确对齐

Question

我的设置是这样的：

.cprp_data {
  width: 100%;
  overflow: hidden;
}

.cprp_title {
  width: 80%;
  float: left;
}

.gelijkeniscore {
  float: right;
}

.cprp_percentage {
  float: right;
}

.cprp_excerpt {
  width: 80%;
  float: left;
}

.cprp-custom-container {
  float: right;
}

<div class="cprp_data">
  <div class="cprp_title">TITLE</div>
  <div class="gelijkeniscore">SOME CONTENT</div>
  <div class="cprp_percentage">SOME CONTENT</div>
  <div class="cprp_excerpt">SOME CONTENT</div>
  <div class="cprp-custom-container">SOME CONTENT IN SEVERAL DIVS
  </div>
</div>

cprp_data 应该起到包装器的作用，这就是我希望其中的其他 div 对齐的方式：

<cprp_title> <gelijkeniscore>
<cprp_excerpt> <cprp_percentage>
               <cprp-custom-container>

为了清楚起见，divs cprp_excerpt 和 cprp_title 应该使用 80% 的宽度彼此左对齐，另外 3 个 div s 也应该使用剩余的 20% 彼此对齐，看起来有点像侧边栏。

我无法让它工作。使用几个 CSS 设置尝试了几个小时。上面的 CSS 与我到目前为止所得到的一样接近。但不知何故 cprp_excerpt div 一直占据 100% 的宽度，将 cprp-custom-container 向下推。任何帮助将不胜感激！

Answer 1

将cprp_percentagediv移到cprp_excerptdiv

之后

Answer 2

根据问题陈述推断：

所有内部 div 现在都按所需的层次结构相互堆叠
左侧容器占屏幕宽度的 80%
右侧容器占屏幕宽度的 20%
container wrapper保持不变，我刚刚引入了两个sub-wrappers来区分屏幕左右两侧的内容

希望这段代码对您有所帮助！

.cprp_data {
  width: 100%;
  overflow: hidden;
  /* display flex to control the scenario */
  display: flex;
}

/*.cprp_title {
  width: 80%;
  float: left;
}

.gelijkeniscore {
  float: right;
}

.cprp_percentage {
  float: right;
}

.cprp_excerpt {
  width: 80%;
  float: left;
}

.cprp-custom-container {
  float: right;
}
*/
/* as the left section should be 80% in width */
.left{
width: 80%;
border: 1px solid #000000;
}
/* as the right section should be 20% */
.right{
width: 20%;
border: 1px solid #000000;
}

<div class="cprp_data">
<div class="left">
  <div class="cprp_title">TITLE</div>
   <div class="cprp_excerpt">SOME CONTENT</div>
 </div>
 <div class="right">
  <div class="gelijkeniscore">SOME CONTENT</div>
  <div class="cprp_percentage">SOME CONTENT</div>
 
  <div class="cprp-custom-container">SOME CONTENT IN SEVERAL DIVS
  </div>
  </div>
</div>

无法让 div 与 css 正确对齐

Can't get divs to align properly with css

html

css

alignment