html - 如何使三列的中间列灵活宽度取决于

如何拥有三列，中间列的灵活宽度取决于第一列。

例：

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>

最佳答案

您可以使用具有一些弹性的表格布局，如下所示：

.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>