Question

我要实现的目标：将容器div（包含两个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;

}

Answer 1

将align方法更改为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>

Answer 2

.container{display:flex;}
.column1, .column2{
  width:200px;
 
  margin: 10px;
  border:solid 1px #ccc;
  flex-direction:column;
  
}
.column2{

justify-content:flex-end;
display:flex;
}
#img{
  max-width: 100%;

}
p{ margin:0;}
.container {
  width: 80%;
  padding-top: 100px;
  margin: 0 auto;

}

  <div class="container">
    <div class="img column1">
      <img id="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAADCCAMAAAB6zFdcAAAAdVBMVEXMzMwAAADPz8/S0tLU1NS4uLjDw8OMjIyrq6vHx8ezs7OmpqbBwcHX19dRUVGampp2dnavr69jY2OdnZ1eXl4aGhp+fn5sbGynp6dKSkp4eHg6Ojp/f39ERERmZmYhISEoKCgNDQ2Tk5NXV1cuLi43NzctLS2IdN5EAAAE4ElEQVR4nO3Ye3uqOBAHYCYJIILcrTfwAtrv/xF3wi1E291297T6PPt7/+jxoEYymSRDHAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgf0RIJsTdxYcPfLvZv23i37X5Q4QTpmWZJpF1h14TTK9VtucPbJ3v3bFwm+kLyks2ZZ4WjpyuuFVepkXwElGQxYUOZXsjWs7uR9TkDv8VUU3rtrzRefmdGxYBkRpfp0R1nh+Imv6ScEqiuDzQpZCfN/FbVEUbT0mlROjNrvJNDzEQ3nq9WPEn3AN9JwiynmIgd9QIJaUK9uT3fa4pUdymV9LzgyBC8oc7nWdBRtUYA1lSJPv338/qoYHPKJ/ehhiIgorhixzbSLdZ0aK7IkRL3mdN/BZxblePFz1K3SEGwh2HzhFLSr6aCBzFohliII/raawDKnQTtJmiSfsnJwKngfvYLRWf1HJ4Q77RtDjKw26WCPNl/35TcZx1vvLHGJQmf1Y8K3RiTLNK5fT15PoRMq+l7oHVB+mTK8cYqGs8jdM8Ho7ThuaNZmMPpirXuplhLvjT1zg9uPcyN4nB8fhgFH6Tuux5qXKLpHDUeCdd9ospD2a5ylljVkVxpMXwjkootWIgE/6gGGPg8NQaoiEOtdDLZTyNPf/alyfYz4goFBXR6Uy0m+oDvUSMMbBukS8uzP2uNkMQuMeVlc8i0gutiYEsqAyU4GCf17ogCNazNcAj/6kx4NTMDpR4vJkX62GM1UZn7hQDq9uRNWayDwJnwZs9peWhm2G+qQ+WByoTf0dpVxMF825bAXkCsaVz3a8FQlxJ/ytDysQsBtk8BgE18zHjTNjKhyxw1L6b//MYKA4Cy93ux+yhP2+eG4OQaKxWOesrqau7vb7zL8Wgy4SC3uw+8FfC7qtTDIRbU5oFUdFSrX/u1WKQTmOodjflqLruC6IvzAW24nryLgs4UH2bUwy4jdzRj0dCue8X7/XmQjHdjUwvAVd3/dL48ZpoJYXGawFt7Ris2vd+dvHeOJRf13aaFAGV0u529Pw1MTQxqMjLqAk8LVhQxq/03ph+vpfzWuCnFM7HkUd/OTThk8N/9Y+Yb0ldQMt6N98bi6fGQM9MU+ikF/18Z4kcdZvVSNW8RuqyoFK8j8yDoA52C1fJUTGd7ArTuxopem4M1Nn0UMU35S5GDSX8965WvsXzvJf9pmgHQSzHFrKU+HVXK5nviITjatfKl2fXytU0ClzY8AIvBrpW7o6W5s9MW2tJVI3eSJyHIIx4bVnpIpyXlq05TDnqhTKg47hleE9/ZuLJEPdFslDtPNGnWpmL+/HZWZxOs9sVzVQa6SA85rPZFw6ncQOWWbe8cOizfu+QL/DszGXszl0ptXJjqx8mBryKX0LFn1jenaFcTV2gNrfHhDYxcOkcyu4Mxae6v1RTI7nRqH2BMxSuC9d0jeMznTLrPNHEQAQ7WsfxO53uHvDEhy/NNVMjeTE/j5Tllcwmc6TLrr0Rh/dP9eQ/EGKR5se3xd0Zb1CYmSGXVV7u7z/xj1yz6Sk32eT5vghmZ6r+sUzDb57T/piPT7n/wDm4dcjycLYuXuhsHQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4Nf8BZyMMUIZKGmqAAAAAElFTkSuQmCC">
    </div>
    <div class="comment column2">
      <p>a paragraph</p>
      <p>another paragraph</p>
       <p>another paragraph</p> <p>another paragraph</p>
    </div>
  </div>

Answer 3

对此最简单且可能最好的解决方案是使用“灵活的盒子布局”。在下面的代码段中，我列出了您可以使用的示例。我建议您阅读更多关于flexbox的内容，因为它绝对可以在以后的布局问题上再次为您提供帮助：

A Complete Guide to Flexbox on css-tricks.com

CSS Flexible Box Layout on MDN

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
   
  /* just for presentation */
  padding: 1em;
  border: 1px solid black;
}

.column--picture{
  flex: 0 0 auto;
  
  /* up to you */
  width: 200px;
  height: 400px;
}

.column--picture img{
  /*
   make sure to limit the size of the image,
   or make `.column--picture` to not show
   overflow content
  */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.column--wrapper{
  flex: 0 1 auto;
  
  /* just for presentation */
  max-width: 400px;
}

.row{
  /* just for presentation */
  margin-left: 1em;
  padding: 1em;
  border: 1px solid black;
}

<div class="container">
  <div class="column column--picture">
    <img src="https://images.unsplash.com/photo-1458966480358-a0ac42de0a7a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjI2ODUxfQ&s=b92b03976bc401ad70337cfd39e9ed95" alt="green leaf tree on shore">
  </div>
  <div class="column column--wrapper">
    <div class="row">
      <h2>Stop floating and start flexing.</h2>
    </div>
    <div class="row">
      <p>Turkey beef biltong, sausage ball tip pork loin pork chop corned beef boudin ground round salami pancetta flank filet mignon sirloin.</p>
    </div>
  </div>
</div>

Answer 4

您可以使用flexbox实现此目的。如果您尝试与旧版浏览器（例如IE 10）兼容，则此方法可能无效。 Flexbox是对齐项目的更好方法。

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

.container {
  display: flex;
  justify-content: center;
}

.container img {
     height: 180px;
}

.container .column2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

<body>
  <div class="container">
    <div class="img column1">
      <img 
  id="img"src="https://upload.wikimedia.org/wikipedia/en/5/58/Penny_test.jpg">
    </div>
    <div class="comment column2">
      <p>a paragraph</p>
      <p>another paragraph</p>
    </div>
  </div>
</body>

Answer 5

将此代码添加到CSS中。

.column1, .column2 {
  width:300px;
  margin: 10px;
  display: inline-block;
  vertical-align: bottom;
}
p {    
  margin-top: 0;
  margin-bottom: 0;    
}

有关解决方案，请参见this link。

Answer 6

您还可以使用rowpan和colspan功能，只需使用属性valign = bottom对齐

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
       <td rowspan="2" valign="bottom">$50
</td>
  </tr>
  <tr>
      <td>February</td>
      <td>$80</td>
  </tr>
</table>

</body>
</html>

使容器div居中对齐，并将文本对齐div的底部

6 个答案: