html - 你怎么能有三列，中间列的灵活宽度取决于

Question

你怎么能有三列中间列的灵活宽度取决于第一列。

示例:

Firstname ........ John
Age .............. 39
Country .......... Germany

请问仅用 html 和 css 能实现吗？

目前我有这段代码，但它不灵活，我的意思是 Person 属性可能随时更改，所以我希望点列在第一列上是灵活的。

.container {
  width: 100%;
}

.container div {
  display: inline-block;
}

.one {
  background: red;
}

.two {
  background: green;
}

.three {
  background: blue;
}

<div class="container">
  <div class="one">111111</div>
  <div class="two">.............</div>
  <div class="three">333</div>
</div>

Answer 1

您可以像下面这样使用带有一些 flex 的表格布局:

.container {
  display:table;
}
.row {
 display:table-row;
}

.container .col {
  display: table-cell;
  position:relative;
}
.container .col:first-child span{
  display:flex;
}

.col:first-child span:after {
  content:"";
  background:radial-gradient(circle at center,#000 2px,transparent 3px)0 0 /10px 100%, yellow;
  flex:1;
  padding-right:80px;
}

<div class="container">
<div class="row">
  <div class="col"><span>Firstname</span></div>
  <div class="col">John</div>
</div>
<div class="row">
  <div class="col"><span>Age</span></div>
  <div class="col">39</div>
</div>
<div class="row">
  <div class="col"><span>Country</span></div>
  <div class="col">Germany</div>
</div>
</div>