CSS对齐文本和图像

Question

CSS对齐文本和图像

3

我有一个包含3列的div。在每个div中，我都有一段文字和一张图片。是否可以将这些图片对齐到同一高度？现在图片总是在文字下面，但是每列的文字长度不同。我希望将这些图片放在每列底部。

谢谢，

Carolin

#content_row{
    margin-top:150px;
    margin-left:10px;
    margin-right:10px;

}

#content_col{
    -webkit-transform: scale(0.8);
     transform: scale(0.8);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
     padding-bottom: 30px;



}
#content_col:hover{
    -webkit-transform: scale(1);
  transform: scale(1);
     -moz-box-shadow:    0 0 50px black;
     -webkit-box-shadow: 0 0 50px black;
     box-shadow:         0 0 50px black;
}

.tile-img{
    max-width: 100%;
    margin-left: auto;
    margin-right:auto;
    vertical-align: bottom;

}

<div class="row" id="content_row">
  <div class="col-sm-4" id="content_col"><h3>Test</h3>
         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
           <img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
  </div>
    <div class="col-sm-4" id="content_col"><h3>Test2</h3>
          <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
           <img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
  </div>
    <div class="col-sm-4" id="content_col"><h3>Test3</h3>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
           <img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
     </div>
 </div>

- CarolinaPdw

一张图片胜过千言万语 ;) ... 请添加一张截图以及至少包含您的HTML CSS代码中负责的部分。 - woodii

我知道你只会添加图片。创建一个 [mcve]，因为 [mcve] 的作用比100000000000个单词和图片还要大。 - Alon Eitan

@woodii，我刚刚添加了一个简单的示例来说明我的问题。我希望所有图像都对齐到底部。 - CarolinaPdw

@AlonEitan添加了代码，但运行它时不会在一行中显示... - CarolinaPdw

@CarolinaPdw 现在你的问题非常好！我取消了我的踩，改成了赞。 - Alon Eitan

3个回答

0

是的，你可以这样做，但必须使用flex-box。给每个列属性设置为display: flex;并将其方向设置为flex-direction: column。在额外的

中包装文本，并将其属性设置为flex-grow: 1。总之：

HTML

<div class="row">

  <div class="col col-md-4">…</div>     

  <div class="col col-md-4">
    <div class="text">
     <p>Text …</p>
    </div>
    <img src="path/to/img">
  </div>

  <div class="col col-md-4">…</div>     

</div>

CSS

.row {
  display: flex;
  flex-direction: column;
}

.text {
  flex-grow: 1;
}

- marcobiedermann

如果我尝试使用你的代码，它会显示在一列中而不是一行。 - CarolinaPdw

当然，你需要在CSS中调整你的选择器。 - marcobiedermann

0

您可以根据任何列中的最大字符数为p标签添加高度。

您还可以使用col-xs-*而不是col-sm-*来支持非常小的显示尺寸。

#content_row{
    margin-top:150px;
    margin-left:10px;
    margin-right:10px;

}

#content_col{
    -webkit-transform: scale(0.8);
     transform: scale(0.8);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
     padding-bottom: 30px;
}
#content_col:hover{
    -webkit-transform: scale(1);
  transform: scale(1);
     -moz-box-shadow:    0 0 50px black;
     -webkit-box-shadow: 0 0 50px black;
     box-shadow:         0 0 50px black;
}

.tile-img{
    max-width: 100%;
    margin-left: auto;
    margin-right:auto;
    float: top;

}
.p-text{
     height:500px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<div class="row" id="content_row">
  <div class="col-xs-4" id="content_col"><h3>Test</h3>
         <p class="p-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
           <img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
  </div>
    <div class="col-xs-4" id="content_col"><h3>Test2</h3>
          <p class="p-text">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
           <img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
  </div>
    <div class="col-xs-4" id="content_col"><h3>Test3</h3>
          <p class="p-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
           <img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
     </div>
</div>

- Aashish Kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pete · Accepted Answer

试试这个：

/* CSS used here will be applied after bootstrap.css */

#content_row {
  margin-top: 150px;
  margin-left: 10px;
  margin-right: 10px;
  display: flex;           /* add the following 2 styles */
  flex-direction: row;
}

#content_row>.col-sm-4 {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  padding-bottom: 30px;
  flex-grow: 1;                       /* add this to make the column grow to the height of the row */
  display: flex;
  flex-direction: column;
}

#content_row>.col-sm-4>p {
  flex-grow: 1;               /* add this to make the p take up all remaining space */
}

示例 bootply

您还会注意到，我已从列中删除了您的id-ids应该是唯一的。