CSS left 和 rghtDiv 不是左右对齐而是上下对齐

Question

我的 css 和 html 如下所示。 mRow 是主要的 div，其中是我的 mRowLeft 和 mRowRight。然而，我看到它们出现在左上角和右下角，而不是左上角和右下角。

div.mRow {
  padding: 2px 25px 2px 0;
    margin-top: 4px;
    margin-bottom: 3px;
  float: left;
  text-align:left;
  width: 350px;
  /*border:1px solid green;*/ 
}


.mRowLeft {
  padding: 2px 25px 2px 0;
    margin-top: 4px;
    margin-bottom: 3px;
  float: left;
  text-align:left;
  width: 48%;
  /*border:1px solid green;*/ 
}

.mRowRight {
  padding: 2px 25px 2px 0;
    margin-top: 4px;
    margin-bottom: 3px;
  float: right;
  text-align:left;
  width: 48%;
  /*border:1px solid green;*/ 
}
///....
<div class="mRow">
<div class="mRowLeft"></div> --label
<div class="mRowLeft"></div> --10rows
<div class="mRowRight"></div> --label
<div class="mRowRight"></div> --10rows
</div>
...//

Answer 1

.mRow
{
  display:flex;
  justify-content:space-around;
}

<div class="mRow">
<div class="mRowLeft">
  dfsf
  <div class="mRowLeft">sdfvs</div> 
</div>

<div class="mRowRight">
  sdfs
  <div class="mRowRight">sdfsd</div>
</div> 

</div>

Answer 2

你应该把你的标签和内容放在同一个 left/right div.

<div class="mRow">
  <div class="mRowLeft">
    <div>--label</div>
    <div>10rows</div>
  </div> 

  <div class="mRowRight">   
    <div>label</div>
    <div>10rows</div> 
  </div>
</div>

那么你可以使用内联块：

.mRow {
  white-space: nowrap;
  width: 350px;
}

.mRowLeft,
.mRowRight {
  display: inline-block;
  white-space: normal;
  width: 50%;
}

或使用 flexbox:

.mRow {
  display: flex;
  flex-direction: row;
  width: 350px;
}

.mRowLeft,
.mRowRight {
  width: 50%;
}

CSS left 和 rghtDiv 不是左右对齐而是上下对齐

CSS left and rghtDiv not aligning to left and right but top and bottom

html

css

jsp

stylesheet