html - 将div放置在另一个div之下(使用flexbox)

我正在尝试将timeAgo即22 seconds ago内容放在info内容的正下方。但是，对于我正在使用的样式，timeAgo被推向右侧。

这是我的标记-

.container {

		overflow:auto;

	}
	.post {
		height:120px;
		width:700px;
		margin:120px auto;
		background-color:#EFEFEF;
		border:1px solid #79CEF4;
		display:flex;
		justify-content:flex-start;
	}


	.photo {
		width:80px;
		height:80px;
		background-color:#99E058;
		margin:10px 10px 10px 20px;
		align-self:center;

	}

	.info {

		margin: 25px 10px 10px 20px;
		align-self:center;

	}

	.timeAgo {
		margin: 80px 10px 10px 20px;
		font-size:11px;

	}

<div class="container">

     <div class="post">

        <div class="photo"></div>
        <div class="info"><p>This is just a plain simple message!</p></div>
        <div class="timeAgo">22 seconds ago</div>

     </div>

    </div>

最佳答案

最简单的操作是调整HTML。

.post {
  height: 120px;
  width: 700px;
  margin: 20px auto;
  background-color: #EFEFEF;
  border: 1px solid #79CEF4;
  display: flex;
  align-content: center;
  justify-content: flex-start;
}
.imgwrap {
  text-align: center;
}
.photo {
  width: 80px;
  height: 80px;
  background-color: #99E058;
  margin: 10px 10px 10px 20px;
}
.info {
  margin: 25px 10px 10px 20px;
}
.timeAgo {
  font-size: 11px;
}

<div class="post">
  <div class="imgwrap">
    <div class="photo"></div>
    <div class="timeAgo">22 seconds ago</div>
  </div>
  <div class="info">
    <p>This is just a plain simple message!</p>
  </div>


</div>

但是...如果不能这样做，则必须允许flex容器包装，并将timeAgo div强制设置为第二个“行”。

单程:

.post {
  height: 120px;
  width: 700px;
  margin: 20px auto;
  background-color: #EFEFEF;
  border: 1px solid #79CEF4;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}
.photo {
  flex: 0 0 80px;
  height: 80px;
  background-color: #99E058;
  margin: 10px 10px 0px 10px;
}
.info {
  flex: 1;
  display: flex;
  align-self: center;
}
.timeAgo {
  flex: 0 0 100%;
  font-size: 11px;
  margin: 10px;
}

<div class="post">

  <div class="photo"></div>


  <div class="info">
    <p>This is just a plain simple message!</p>
  </div>

  <div class="timeAgo">22 seconds ago</div>
</div>

关于html - 将div放置在另一个div之下(使用flexbox)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33329225/