无法在同一行中设置div

Question

好吧， 我使用css进行了一个非常复杂的标记，并尝试以通常的方式将它们设置为div旁边的div，但是它不起作用。 所以这是我不能在同一行中设置的特定区域的标记，这里是：

ComPS_CtnA {
  margin-top: 3%;
  display: flex;
  flex-flow: column;
}

.ComPS_CtnA {
  margin-right: 2.5%;
  direction: rtl;
}

.CompP_CtnA {
  display: flex;
  flex-flow: row;
  margin-top: 1%;
  flex-direction: column;
}

.ComPH_A,
.comPTCtn {
  width: 100%;
  direction: rtl;
  text-align: right;
}

.comPTP_A {
  float: right;
  text-align: right;
}

.diamondSymbol {
  color: #14366b;
}

.comPTT_A {
  color: #33558a !important;
  margin: 0;
  text-align: left;
}

<div class="ComPS_CtnA clearfix">
  <div class="CompP_CtnA clearfix">
    <h5 class="ComPH_A">
      <span class="diamondSymbol">♦ </span>
      Blablablablabla
    </h5>
    <span class="comPTP_A">[abcdefg]</span>
    <div class="comPTCtn clearfix">
      <h5 class="comPTT_A">I want to be in same line with blablablabla</h5>
    </div>
  </div>
</div>

Answer 1

您可以使用Grid（我认为这是最好的方法，因为您可以使用它使网站易于响应）：

EXPLAIN

.CompP_CtnA{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto;
    grid-template-areas: 'item1 item2' '. item3';
}

.comPTCtn{
    grid-area: item1;
}

.ComPH_A{
    grid-area: item2;
}

.item3{
    grid-area: item3;
}

.float{
    float: right;
}

.diamondSymbol {
    color: #14366b;
}

.comPTT_A {
    color: #33558a;
}

Answer 2

替换此：

.ComPH_A, .comPTCtn  {
    text-align: right;
    float: left;
    direction: rtl;
}

float是一个属性，用于使相邻项目位于左侧，右侧或中心。

Answer 3

您可以像这样简化代码。您正在使用flexbox，因此无需使用float：

.ComPS_CtnA {
  margin-top: 3%;
  display: flex;
  justify-content:space-between; /* This is what you need */
  direction: rtl;
  margin-right:2.5%
}


.diamondSymbol {
  color: #14366b;
}

.comPTT_A {
  color: #33558a;
}

<div class="ComPS_CtnA clearfix">
  <div class="CompP_CtnA">
    <h5 class="ComPH_A"><span class="diamondSymbol">♦ </span>Blablablablabla</h5>
    <span class="comPTP_A">[abcdefg]</span>
  </div>

  <div class="comPTCtn ">
    <h5 class="comPTT_A">I want to be in same line with blablablabla</h5>
  </div>
</div>

Answer 4

您可以使用向左浮动和向右浮动技术。

div {
  width: 100%;
  height: 30px;
  padding-top: 10px;
  text-align: center;
  font-family: sans-serif;
}

#item1 {
  width: 50%;
  background-color: blue;
  float: left;
  color: white;
}

#item2 {
  width: 50%;
  background-color: red;
  float: right;
  color: white;
}

<div>
  Above
</div>
<div id="item1">
  Left
</div>
<div id="item2">
  Right
</div>
<div>
  Underneath
</div>