CSS对齐文字和图片

Question

我有一个有3列的div。在每个div中我都有一个文本和一个图像。是否可以将图像对齐在同一高度？现在图像在文本下方，但每列的文本长度不同。我想将图像放在每列的底部。

谢谢，

卡罗琳

#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>

Answer 1

试试这个：

/* 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 */
}

Example bootply

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

Answer 2

是的，你可以这样做，但你必须使用flex-box。 为每列提供display: flex;的属性，并将其方向设置为flex-direction: column。 将文本换行为额外的div并赋予其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;
}

Answer 3

您可以根据任意列中的最大字符添加cookieUtility.clear('name') //need to pass cookie name and path(if required) 标记的高度。

您还可以使用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;
}