Question

我正在尝试互相添加帖子。我首先使用了这个CSS，但是它会将所有帖子添加在同一位置。我如何修改此代码以将它们彼此添加（如Facebook墙）？

   .post00{
    top:150px;
    left:500px;
    position:absolute;
    width:600px;
    height:210px;
    background:white;
    word-break: break-all; word-wrap: break-word;

    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    }

如果我删除顶部，左侧和绝对位置，则帖子将不会在中心对齐。

Answer 1

HTML

.post00{
    display:flex;
    justify-content:center;
    align-items:center;
    background:white;
    word-break: break-all; word-wrap: break-word;

    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}

使用Display：flex;将内容“居中对齐；居中”居中对齐，以使内容水平对齐和“ align-items：center;”使内容垂直居中对齐。

Answer 2

弹性盒是处理此问题的好方法。该指南是一个很好的资源。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.post-list {
  background: grey;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.post {
  border-radius: 10px;
  background: white;
  margin: 10px;
  padding: 10px;
  width: 300px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}

<section class="post-list">
  <article class="post">
    <h3>Hello</h3>
  </article>
  <article class="post">
    <h3>Hello</h3>
  </article>
  <article class="post">
    <h3>Hello</h3>
  </article>
  <article class="post">
    <h3>Hello</h3>
  </article>
  <article class="post">
    <h3>Hello</h3>
  </article>
  <article class="post">
    <h3>Hello</h3>
  </article>
  <article class="post">
    <h3>Hello</h3>
  </article>
  <article class="post">
    <h3>Hello</h3>
  </article>
  <article class="post">
    <h3>Hello</h3>
  </article>
  <article class="post">
    <h3>Hello</h3>
  </article>
</section>

如何垂直添加帖子而不互相替换

2 个答案: