Html 如何在两个内联块元素之间插入换行符？

我想知道如何在小提琴中的这些to div元素之间引入换行符

这里的挑战是元素需要居中，但我也需要能够强制换行。如果我使用float，我可以通过以下方式控制断线：

.article:after {
   content: '\A';
   white-space: pre;
}

但很明显，元素不再居中

这是一个直截了当的问题

编辑：我用一个新的提琴进行了更新，以明确需要

显示：内联块

，将鼠标悬停在其中一个图像上以查看图像上方的覆盖

<div id="posts">
  <div class="article">
    <div class="inner">
      <div class="overlay">
      </div>
      <div class="content photo">
        <img style="max-width: 45vw;" src="http://dummyimage.com/600x400/000/fff">
      </div>   
    </div>
  </div>

  <div class="article">
    <div class="inner">
      <div class="overlay">
      </div>
      <div class="content photo">
        <img style="max-width: 38vw;" src="http://dummyimage.com/600x400/ff0000/fff">
      </div>   
    </div>
  </div>          
</div>

---

使它们成为

block

元素而不是

inline block

将打破界限并使它们居中：

这是因为

.article

div继承了父div的

文本对齐：居中

。由于图像是内联元素，因此会使它们居中

编辑

另一种解决方案是保留

inline block

属性，即使用父元素上的

字间距来增加元素之间的间距（因为它们是内联的）。将其设置为视口单元（例如VW）将完全破坏元素：


你能提供你想要的目标的GIF吗？我不明白它是什么样子的？@j08691正确，但是display:inline块是必需的，所以你不能直接删除它。另外，downvoter，请详细说明你为什么要进行downvoter。为什么不把每一行都用div括起来呢？谢谢你的建议。但是我需要
显示：inline块
或与之完全相同的内容，请参阅我更新的问题中的小提琴，了解叠加效果（该效果已被
显示：block
破坏），只想回到这里，告诉大家这个解决方案目前在Safari中不起作用。无论是在iOS还是在OSX上。
#posts {
    text-align:center;
}

.article {
    margin: 10px;
    position: relative;
    float: none;
    display: inline-block;
    vertical-align: bottom;
}

.article:after {
    content: '\A';
    white-space: pre;
}

.article .inner {
    position: relative;
    width: 100%;
    height: 100%;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.article .overlay {
    height: 101%;
    width: 101%;
    margin: 0 0 -25px;
    position: absolute;
    top: -1px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background-color: rgba(0,0,0,0);
    -webkit-transition: background-color .3s ease-out;
    -moz-transition: background-color .3s ease-out;
    -o-transition: background-color .3s ease-out;
    transition: background-color .3s ease-out;
}

.content {
    position: relative;
}

img {
    max-width: 100%;
}

.article {
    margin: 10px;
    position: relative;
    float: none;
    display: block;
    vertical-align: bottom;
}

#posts {
    text-align: center;
    word-spacing: 100vw;
}