无法让 div 与 css 正确对齐答案

【问题标题】：Can't get divs to align properly with css无法让 div 与 css 正确对齐
【发布时间】：2020-09-16 01:24:41
【问题描述】：

我的设置是这样的：

.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>

需要明确的是，div cprp_excerpt 和 cprp_title 应该使用 80% 的宽度在彼此的顶部左对齐，而其他 3 个 div 也应该使用剩余的 20% 在彼此顶部对齐，看起来有点就像一个侧边栏。

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

【问题讨论】：

你的代码中有几个拼写错误，我猜是 80& 而不是 80%。另外，将width 添加到您的不同元素中！
是否无法更改标记？如果您可以更改标记的顺序以匹配输出中的顺序，这将更容易。或者，如果您可以在两个以相反顺序排列的元素周围添加一个 div，您可以使用 flexbox 和 flex-direction 来翻转它们。
更改标记很困难，因为输出是由 2 个不同的 wordpress 插件生成的。但是我应该能够通过编辑其中一个插件的 php 添加一个 div。你能帮我如何以及在哪里添加它吗？
您可以更改哪些 div 的顺序？
除 cprp-custom-container 之外的每个 div 总是排在最后，因为它是由单独的插件生成的。

标签： html css alignment

【解决方案1】：

将 cprp_percentage div 移到 cprp_excerpt div 之后

【讨论】：

这让我走到了一半。谢谢你。然而，cprp-custom-container div 仍被一直向下推，与 cprp_excerpt div 内容的右下方对齐。虽然我希望它直接在 cprp_excerpt div 旁边的 cprp_percentage div 下方对齐
很高兴为您提供帮助

【解决方案2】：

从问题陈述中推断：

现在所有内部 div 在所需的层次结构中相互堆叠
左容器占据屏幕宽度的 80%
右容器占屏幕宽度的 20%
容器包装保持不变，我刚刚引入了两个子包装来区分屏幕左右两侧的内容

希望这段代码有帮助！

.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>

【讨论】：

很高兴为您提供帮助@njinok
是的，没问题。但是，我该怎么做呢？
点击复选标记，它变成了绿色。再次感谢您的帮助！