Html 将一个 div 放在另一个下面（使用 flexbox）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33329225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Placing a div below another (using flexbox)
提问by Aminah Nuraini
I am trying to place the timeAgoi.e. 22 seconds agocontent just below the infocontent. But, for the styling I am using, timeAgois being pushed towards right.
Here is my markup -
我试图将timeAgoie22 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>采纳答案by Paulie_D
The simplest thing to do is adjust the HTML.
最简单的方法是调整 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>BUT...if you can't do that, you'll have to allow the flex-container to wrap and make the timeAgodiv be forced to the second 'row'.
但是...如果你不能这样做，你将不得不让 flex-container 包装并使timeAgodiv 被强制到第二个“行”。
One way:
单程：
.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>回答by Aminah Nuraini
This is a much simpler answer. Use flex-direction: column;!
这是一个简单得多的答案。使用flex-direction: column;！
.post {
height:120px;
width:700px;
margin:120px auto;
background-color:#EFEFEF;
border:1px solid #79CEF4;
display:flex;
justify-content:flex-start;
flex-direction: column; /*This solves everything*/
}
回答by damianK
It's not an ideal solution, but still;
这不是一个理想的解决方案，但仍然是；
.timeAgo {
margin: 80px 10px 10px -260px;
font-size:11px;
}
