简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
How to float only the second div to the right in a container and wrap the first div if it is too long
P粉505917590
P粉505917590 2023-09-15 12:28:31
0
1
648

I have rows containing text and data.

The text box must be aligned to the left, and text-align left. The number box must be right aligned and the text right aligned.

They should exist side by side, unless the name is too long, in which case the number box will wrap within the line. All numbers in the row should be packed together. Each name has a different length on each line.

When the number box wraps, the outer container must expand vertically because there is a border below it that must stay below the number, and the next line has a margin top that must be pushed down.

The 2 columns of numbers per row must be vertically aligned in all rows.

Because there are many lines, hundreds of them, redundant markup should be minimized to keep rendering times short.

What I tried:

I tried using float, but float unbinds the div from the parent container and does not cause the parent box to expand vertically when wrapping.

I tried using a position of right:0px but the number box doesn't wrap.

I tried using flex, but the numbers no longer line up with the other rows because each text and number on each row is a different length.

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
}

Answers to similar questions cannot meet all requirements.

How can I achieve the first div (text) to be left aligned and the second div (number group) to be right aligned, keep the columns aligned, wrap when there is not enough space, and somehow cause its parent container to expand vertically wrapped.

P粉505917590
P粉505917590

reply all(1)
P粉250422045
P粉2504220452023-09-16 09:05:03 1 floor

You didn't post any expected results, so I can only guess... is this what you want? 

.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>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！