JSP CSS left和rghtDiv不对齐到左和右，而是对齐到顶部和底部

5sxhfpxr 于 2023-08-01 发布在其他

关注(0)|答案(2)|浏览(97)

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

字符串

jsp

来源：https://stackoverflow.com/questions/61595545/css-left-and-rghtdiv-not-aligning-to-left-and-right-but-top-and-bottom

2条答案

按热度按时间

nwo49xxi1#

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

型

赞(0）回复(0）举报 2023-08-01

vnzz0bqm2#

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

个字符

赞(0）回复(0）举报 2023-08-01

我来回答

JSP CSS left和rghtDiv不对齐到左和右，而是对齐到顶部和底部

2条答案

相关问题

热门标签

最新问答