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

你应该把你的标签和内容放在同一个左右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>

然后你可以使用inline-blocks:

.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%;
}

Answer 2

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