Question

我有三个div，每个都是随机大小，而我希望每个间隙都有相同的宽度（虚线）：

一些例子：

<Left Div>...............<Mid Div>..............<Right Div>
<Larger Left Div>...........<Mid Div>...........<Right Div>
<Left Div>...........<Mid Div>...........<Larger Right Div>

我可以使用float: left;和float: right;轻松对齐左右div，但无法确定如何使中间div居中。我考虑过使用flexbox或tables或使用text-align: justify;

进行游戏

如果有帮助，我已经使用了 JS Fiddle Demo 。谢谢你的任何提示。

Answer 1

使用justify-content: space-between，您可以使用* { margin: 0; } .mainframe { display: flex; justify-content: space-between; }

<div class="mainframe">
  <div class="left">Lorem ipsum</div>
  <div class="center">"Center Me!"</div>
  <div class="right">Lorem ipsum dolor sit</div>
</div>

<div class="row" *ngIf="teamMembers?.length > 0">

Answer 2

您只需将中心div显示为inline-block，然后在容器上使用text-align: center即可。使用此解决方案，您将不会遇到浏览器支持问题。

.mainframe {
  width: 100%;
  text-align: center;
}
.left {
  float: left;
}
.center {
  display: inline-block;
}
.right {
  float: right;
}

<div class="mainframe">
  <div class="center">"Center Me!"</div>
  <div class="left">Lorem ipsum</div>
  <div class="right">Lorem ipsum dolor sit</div>
</div>

Answer 3

如果您担心浏览器支持，那么您可以依赖table。这是你怎么做的

＆＃13;

* {
  margin: 0;
}
.mainframe {
  display: table;
  width: 100%;
  table-layout: fixed;
  /* For cells of equal size */
}
.mainframe div {
  display: table-cell;
  text-align: center;
}

＆＃13;

<div class="mainframe">
  <div class="left">Lorem ipsum</div>
  <div class="center">"Center Me!"</div>
  <div class="right">Lorem ipsum dolor sit</div>
</div>

＆＃13;

三个浮动div之间的相等差距

3 个答案: