html - 三个 float div 之间的间距相等

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

对于Flexbox，您可以使用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>