我想要实现的目标:将容器div(包含两个div)和第二个div中的底部对齐文本居中
在我的第二个div,两段文字
———————-----
| |
| | column2
| column1 | -———————-------
| picture | | Paragraph |
| | ———————--------
| | ———————————------------------
| | | a paragraph of text |
| | | of text of text of text of |
——————----—— ———————----------------------
我的问题:
我无法将我的两段对齐在底部.他们位居榜首.
我的容器div也没有与中心对齐
目前它们看起来像这样:
———————----- -———————-------
| picture | | Paragraph |
| | ———————--------
| | ———————————------------------
| | | a paragraph of text |
| | | of text of text of text of |
| | ———————----------------------
| |
| |
| |
------------
我目前的代码:
<body>
<div class="container">
<div class="img column1">
<img id="img" src="https://animage.jpg">
</div>
<div class="comment column2">
<p>a paragraph</p>
<p>another paragraph</p>
</div>
</div>
</body>
.column1, .column2{
width:300px;
float: left;
margin: 10px;
}
#img{
max-width: 300px;
max-height: 600px;
}
.container {
width: 80%;
padding-top: 100px;
margin: 0 auto;
}
小智 5
将对齐方法更改为Flex,您可以轻松实现这一目标,请看下面的内容
只是删除float: left的列元素和加入display: flex和align-items: flex-end在容器.
.column1, .column2{
width:300px;
margin: 10px;
}
#img{
max-width: 300px;
max-height: 600px;
}
.container {
width: 80%;
padding-top: 100px;
margin: 0 auto;
display: flex;
align-items: flex-end;
}<body>
<div class="container">
<div class="img column1">
<img id="img" src="https://placeimg.com/200/200/any">
</div>
<div class="comment column2">
<p>a paragraph</p>
<p>another paragraph</p>
</div>
</div>
</body>