Question

我试图弄清楚如何在小提琴here中的这些与div元素之间引入换行符。

这里的挑战是元素需要居中，但我需要能够强制换行。如果我使用浮点数，我可以用以下方式控制换行：

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

但显然这些元素不再是中心。

这里有link直接来到小提琴。

编辑：我更新了一个新的小提示，以澄清对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而不是.article { margin: 10px; position: relative; float: none; display: block; vertical-align: bottom; }会破坏该行并使其保持居中：

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

.article

这是因为text-align: center div从父div继承inline-block。由于图像是内联元素，因此会使它们居中...

修改

保持word-spacing属性的另一个解决方案是在父级上使用#posts { text-align: center; word-spacing: 100vw; }来增加元素之间的间隙（因为它们是内联的）。使用视口单元（例如VW）进行设置会完美地破坏元素：

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

{{1}}

使用CSS在两个内联块元素之间插入换行符

1 个答案: