简体中文(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
647

我有包含文本和数据的行。

文本框必须向左对齐，且 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学习者快速成长！