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

Question

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

3

我正在尝试找出如何在这个fiddle（点击这里）中的这两个div元素之间插入一个换行符。

挑战在于这些元素需要居中显示，但我也需要能够强制换行。如果我使用float，我可以通过以下方式控制换行：

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

但是很显然，元素不再居中了。

这里有一个链接直接到jsfiddle页面。

编辑：我更新了一个新的jsfiddle页面，以澄清需要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%;
}

- INT

你能提供你想要达成的目标的GIF吗？我不明白它是什么。 - aemonge

像这样http://jsfiddle.net/z94bzm4n/3/embedded/result/? - j08691

@j08691 正确，但是 display: inline-block 是必须的，所以你不能只是将它移除。 - INT

还有，给我点踩的人，请详细说明为什么要这样做。 - INT

为什么不直接用 div 包装每一行呢？ - pstanton

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LcSalazar · Accepted Answer

将它们从inline-block元素更改为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增加元素之间的间隔（因为它们是内联的）。使用视口单位（例如VW）设置它可以完美地分开元素。 http://fiddle.jshell.net/z94bzm4n/7/

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