Question

如何在中间列灵活宽度取决于第一列的情况下使用三列。

示例：

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

还有可能只用html和css实现这样的事情吗？

目前我有这个代码，但它不灵活，我的意思是Person Attribute可能随时改变，所以我希望dot列在第一列上是灵活的。

＆＃13;

.container {
  width: 100%;
}

.container div {
  display: inline-block;
}

.one {
  background: red;
}

.two {
  background: green;
}

.three {
  background: blue;
}

＆＃13;

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

＆＃13;

Answer 1

您可以使用表格布局，如下所示：

＆＃13;

void (*p)(void) = &SomeFunction;

＆＃13;

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

＆＃13;

Answer 2

我为你准备了snipet，它将在两个元素之间创建虚线。这种方式是点总是填充两个容器之间的空间，容器的白色背景隐藏在它们后面的点。请参阅下文我是如何做到的：

PS：只需编辑.container宽度即可缩小。

.container {
  width: 100%;
  line-height: 9px;
}
.container-line {
  border-bottom: 1px dotted #000000;
  position: relative;
  width: 100%;
  height: 30px;
}

.container div {
  display: inline-block;
}

.one {
  background: white;
  padding: 10px;
  position: absolute;
  left: 0;
  top: 11px;
}

.three {
  background: white;
  float: right;
  padding: 10px;
  position: absolute;
  right: 0;
  top: 11px;
}

<div class="container">
  <div class="container-line">
    <div class="one">111111</div>
    <div class="three">333</div>
  </div>
</div>

你怎么能有三列中柱柔性宽度依赖

2 个答案: