html - 如何在两个内联 block 元素之间插入换行符？

Question

我想弄清楚如何在 fiddle here 中的 div 元素之间引入换行符.

这里的挑战是元素需要居中，而且我需要能够强制换行。如果我使用 float ，我可以控制换行符:

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

但显然元素不再居中。

这是一个 link直接上 fiddle 。

编辑:我更新了一个新的 fiddle 以阐明对 display: inline-block 的需求，将鼠标悬停在其中一个图像上以查看位于图像上的叠加层。

<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>

#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%;
}

Answer 1

使它们成为 block 元素而不是 inline-block 会打破行并使它们居中:

http://fiddle.jshell.net/z94bzm4n/5/

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

发生这种情况是因为 .article div 从父 div 继承了 text-align: center。由于图像是内联元素，因此它们会居中...

编辑

另一种解决方案，保留 inline-block 属性是在父元素上使用 word-spacing 增加元素之间的间距(因为它们是内联的)。使用视口(viewport)单位(例如 VW)设置它会完美地破坏元素:

http://fiddle.jshell.net/z94bzm4n/7/

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