html - 在两个div之间放置一个div

我有两个div元素，如下所示：

<div class="div1">
  This is div 1
</div>
<div class="div2">
  This is div 2
</div>

使用css作为：

.div1 {
  border-style: solid;
  float: left;
  width: 50%;
}
.div2 {
  border-style: solid;
  margin-left: 50%;
  padding-left: 10px;
}

我想添加第三个div，它除了通过CSS之外还没有其他符号。

<div class="div3">
</div>

与CSS：

.div3:after {
    font-family: "FontAwesome";
    content: "\f100";
    color: blue;
    font-size: 1.5em;
}

为了在两个原始div之间很好地定位，我将div 2的css更改为：

.div2 {
  border-style: solid;
  margin-left: 51%;
  padding-left: 6px;
}

在FullScreen上看起来不错。但是，当我将浏览器窗口最小化为较小尺寸时，div2开始重叠div3。

如何在div3和div1之间很好地将div2放置在div2的两侧，并保持均匀的间距？

这是我尝试的JSFiddle：https://jsfiddle.net/d8nuw2m3/5/

编辑：

Roy在下面提供的flex解决方案工作正常。但是，假设左右div的内容增长很多。在这种情况下，将出现滚动条。如果在这种情况下，当我向下滚动时要保持中间div的位置固定，该怎么办？

将position: fixed添加到div3 css不起作用。

这是小提琴：https://jsfiddle.net/zL8sc2a9/

最佳答案

解决方案1

您可以为此使用flex。

用display: flex将所有div包裹在一个容器中：

<div class="flex-container">
  <div class="div1">
    This is div 1
  </div>
  <div class="div3">
  </div>
  <div class="div2">
    This is div 2
  </div>
</div>

.flex-container {
  display: flex;
}

让div1和div2相等地增长（删除宽度，边距，填充）：

.div1 {
  border-style: solid;
  flex-grow: 1;
}
.div2 {
  border-style: solid;
  flex-grow: 1;
}

将固定宽度设置为div3：

.div3 {
  width: 18px;
}

而已！ Flex将为您解决问题：https://jsfiddle.net/1amuwfj5/

解决方案＃2

使用calc()从div3和div1减去div2宽度。大概的概念：

.div1 {
  border-style: solid;
  float: left;
  width: calc(50% - 15px); /* we subtract 9x (half of div3) and 6px (border width) */
}
.div2 {
  border-style: solid;
  float: right;
  width: calc(50% - 15px);
}
.div3 {
  width: 18px;
}

示例：https://jsfiddle.net/1amuwfj5/1/

关于html - 在两个div之间放置一个div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59208711/