CSS left 和 rghtDiv 不与左右对齐，而是上下对齐答案

【问题标题】：CSS left and rghtDiv not aligning to left and right but top and bottomCSS left 和 rghtDiv 不与左右对齐，而是上下对齐
【发布时间】：2020-08-19 01:48:07
【问题描述】：

我的 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>
...//

【问题讨论】：

标签： html css jsp stylesheet

【解决方案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>

然后你可以使用内联块：

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

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

或使用弹性框：

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

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

【讨论】：

【解决方案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>

【讨论】：