Question

我想要三个分区的侧面与中间的解释，另外两个位于末端。所以这就是我的尝试。填充规则扰乱了定位但是必要的。我想要在所有主流浏览器中工作的方法（因此排除Flexbox）

.Button {
  width: 80%; /*Useless Rule*/
}
.Button > .left {
  float: left;
  background-color: blue;
  padding: 5px;
}
.Button > .right {
  float: right;
  background-color: red;
  padding: 5px;
}
.Button> .middle {
  width: 100%;
  background-color: green;
  padding: 5px;
}

<html>

<body>
  <div class="Button">
    <div class="left">&lt;</div>
    <div class="right">&gt;</div>
    <div class="middle">Middle</div>
  </div>
</body>

</html>

Answer 1

我喜欢在父级上使用display: table，在子级上使用display: table-cell。然后给第一个和第三个孩子宽度为1px。然后它只会与其内容一样宽。

.button {
  display: table;
  width: 100%;
}
.button>div {
  display: table-cell;
  text-align: center;
  background: lightblue;
}
.button>div:nth-child(1),
.button>div:nth-child(3) {
  width: 1px;
  background: lightgreen;
}

<div class="button">
  <div>&lt;</div>
  <div>Middle</div>
  <div>&gt;</div>
</div>

三个div与中间div并排扩展

1 个答案: