简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
如何在容器中僅向右浮動第二個 div 並在第一個 div 太長時將其換行
P粉505917590
P粉505917590 2023-09-15 12:28:31
0
1
646

我有包含文字和資料的行。

文字方塊必須向左對齊，且 text-align left。 數字框必須右對齊，文字右對齊。

它們應該並排存在，除非名稱太長，此時數字方塊將在行內換行。該行的所有數字應包裝在一起。每個名稱在每行上都有不同的長度。

當數字框換行時，外部容器必須垂直展開，因為它下面有一個邊框，必須保持在數字下方，並且下一行有一個必須向下推的邊距頂部。

每行的 2 列數字必須在所有行中垂直對齊。

因為有很多行，數百行，所以應該最大限度地減少多餘的標記，以保持較短的渲染時間。

我嘗試過的：

#我嘗試使用float，但是float會解除div與父容器的綁定，並且不會導致父框在換行時垂直展開。

我嘗試使用 right:0px 的位置，但數字框不會換行。

我嘗試使用 flex，但數字不再與其他行對齊，因為每行的每個文字和數字的長度都不同。

HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
  <br />
  <br />
  <div class="container">
    <div class="row">
      <div class="rowName">short name</div>
      <div class="rowData">
        <div>000 xx</div>
        <div>000 %</div>
      </div>
    </div>
    <div class="row">
      <div class="rowName">long name long name long name</div>
      <div class="rowData">
        <div>000 xx</div>
        <div>0 %</div>
      </div>
    </div>
  </div>
</body>
</html>

CSS

.container {
  width: 300px;
}
.row {
  width: 100%;
  margin-top: 6px;
  margin-bottom: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid #cccccc;
}

.row > div:nth-child(2) {
  text-align: right; /* has no effect */
}

.row > .rowName {
  display: inline-block;
}

.row > .rowData {
  display: inline-block;
}

.row > .rowData > div {
  display: inline-block;
  width: 50px;
  text-align: right
}

類似問題的答案無法滿足所有要求。

如何實現第一個 div（文字）左對齊，而第二個 div（數​​字組）右對齊，保持列對齊，空間不足時換行，並以某種方式導致其父容器展開垂直包裹。

P粉505917590
P粉505917590

全部回覆(1)
P粉250422045
P粉2504220452023-09-16 09:05:03 1樓

您沒有發布任何預期結果，所以我只能猜測...這是您想要的嗎？ 

.container {
  width: 300px;
}

.row {
  width: 100%;
  margin-top: 6px;
  margin-bottom: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid #cccccc;
}


/* fix floated children taken out of parent's size */

.row::after {
  content: '';
  display: block;
  clear: both;
}

.row>.rowName {
  display: inline-block;
}

.row>.rowData {
  display: inline-block;
  float: right;
}

.row>.rowData>div {
  display: inline-block;
  width: 50px;
  text-align: right
}
<div class="container">
  <div class="row">
    <div class="rowName">short name</div>
    <div class="rowData">
      <div>000 xx</div>
      <div>000 %</div>
    </div>
  </div>
  <div class="row">
    <div class="rowName">long name long name long name</div>
    <div class="rowData">
      <div>000 xx</div>
      <div>0 %</div>
    </div>
  </div>
</div>
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！