我试图确保内容将显示在列的顶部，无论它们有多大（每列中的内容量）。我删除了CSS，使所有内容在中间垂直对齐，但这会混淆图像的大小和形状..
目前所有列都是相同的高度，无论每列中有多少内容，但是垂直对齐...这意味着只有具有最多内容的列将位于顶部，而另一列具有更少的内容不会...如果我删除水平对齐或垂直对齐的CSS，所有图片大小搞砸了。
.round-image img {
text-align: center;
width: 50%;
margin: 0 auto;
border-radius: 50%;
top: 0;
}
/* Create three equal columns that floats next to each other */
.testimonial-column {
float: left;
flex: 33.33%;
width: 33.33%;
height: auto;
text-align: center;
display: flex;
align-items: center;
/* Vertical center alignment */
justify-content: center;
/* Horizontal center alignment */
padding: .5vw;
font-size: 0;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
margin: 20px;
background-color: #f2f5f5;
}
/* Clear floats after the three columns */
.testimonial-row {
display: flex;
flex-direction: row;
margin-left: 7%;
margin-right: 7%;
}
.testimonial-column img {
display: block;
max-width: 75%;
max-height: 75%;
width: 75%;
height: 75%;
}
.testimonial-information p {
font-size: 20px;
color: black;
text-align: center;
font-weight: bold;
padding-left: 8px;
padding-right: 8px;
}
.main-testi-info p {
font-size: 16px;
color: black;
text-align: center;
font-weight: italic;
padding-left: 8px;
padding-right: 8px;
}
.customer-location-testimonial p {
font-weight: bold;
font-size: 17px;
color: black;
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
.testimonial-large-image {
background-color: #ffffff;
}
.testimonial-container {
background-color: #ffffff;
}<div class="testimonial-large-image">
<div class="testimonial-row">
<div class="testimonial-column">
<div class="round-image">
<img src="http://www.harlowfencing.com/wp-content/uploads/2017/01/maintainedfencepanels-1170x878.jpg" alt="image1" />
<div class="testimonial-information">
<p> this is an example header which will be bold" </p>
</div>
<!-- /testimonial-information-->
<div class="main-testi-info">
<p> This is where a really long paragraph will go This is where a really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and number This is where a really long paragraph will go This
is where a really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and number This is where a really long paragraph will go This is where a really long paragraph will go This is
where a really long paragraph will go I ill continue to type out random letters and number This is where a really long paragraph will go This is where a really long paragraph will go This is where a really long paragraph will go I ill continue
to type out random letters and number
</p>
</div>
<!-- /main-testi-info-->
<div class="customer-location-testimonial">
<p> Mr Doe </p>
</div>
<!-- /customer-location-testimonial-->
</div>
<!-- /round-image> -->
</div>
<!-- /testimonial-column -->
<div class="testimonial-column">
<div class="round-image">
<img src="http://www.harlowfencing.com/wp-content/uploads/2017/01/maintainedfencepanels-1170x878.jpg" alt="image1" />
<div class="testimonial-information">
<p> this is an example header which will be bold" </p>
</div>
<!-- /testimonial-information-->
<div class="main-testi-info">
<p> This is where a really long paragraph will go This is where a really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and number This is where a really long paragraph will go This
is where a really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and number
</p>
</div>
<!-- /main-testi-info-->
<div class="customer-location-testimonial">
<p> Mr Doe - </p>
</div>
<!-- /customer-location-testimonial-->
</div>
<!-- /round-image> -->
</div>
<!-- /testimonial-column -->
<div class="testimonial-column">
<div class="round-image">
<img src="http://www.harlowfencing.com/wp-content/uploads/2017/01/maintainedfencepanels-1170x878.jpg" alt="image1" />
<div class="testimonial-information">
<p> this is an example header which will be bold" </p>
</div>
<!-- /testimonial-information-->
<div class="main-testi-info">
<p> This is where a really long paragraph will go This is where a really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and number This is where a really long paragraph will go This
is where a really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and number This is where a really long paragraph will go This is where a really long paragraph will go This is
where a really long paragraph will go I ill continue to type out random letters and number This is where a really long paragraph will go This is where a really long paragraph will go This is where a really long paragraph will go I ill continue
to type out random letters and number This is where a really long paragraph will go This is where a really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and number This is where
a really long paragraph will go This is where a really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and number This is where a really long paragraph will go This is where a
really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and
</p>
</div>
<!-- /main-testi-info-->
<div class="customer-location-testimonial">
<p> Mr Doe </p>
</div>
<!-- /customer-location-testimonial-->
</div>
<!-- /round-image> -->
</div>
<!-- /testimonial-column -->
</div>
<!-- /grow -->
非常感谢对此的任何帮助
我已将此代码放在jsfiddle中 https://jsfiddle.net/84y0n6jt/5/
答案 0 :(得分：2)
注释掉导致不良行为的几行css：
.round-image img {
text-align: center;
width: 50%;
margin: 0 auto;
border-radius: 50%;
top: 0;
}
/* Create three equal columns that floats next to each other */
.testimonial-column {
float: left;
flex: 33.33%;
width: 33.33%;
height: auto;
text-align: center;
display: flex;
--align-items: center;
/* Vertical center alignment */
justify-content: center;
/* Horizontal center alignment */
padding: .5vw;
font-size: 0;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-ms-flex-direction: column;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: flex;
margin: 20px;
background-color: #f2f5f5;
}
/* Clear floats after the three columns */
.testimonial-row {
display: flex;
flex-direction: row;
margin-left: 7%;
margin-right: 7%;
}
.testimonial-column img {
display: block;
max-width: 75%;
max-height: 75%;
--width: 75%;
--height: 75%;
}
.testimonial-information p {
font-size: 20px;
color: black;
text-align: center;
font-weight: bold;
padding-left: 8px;
padding-right: 8px;
}
.main-testi-info p {
font-size: 16px;
color: black;
text-align: center;
font-weight: italic;
padding-left: 8px;
padding-right: 8px;
}
.customer-location-testimonial p {
font-weight: bold;
font-size: 17px;
color: black;
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
.testimonial-large-image {
background-color: #ffffff;
}
.testimonial-container {
background-color: #ffffff;
}<div class="testimonial-large-image">
<div class="testimonial-row">
<div class="testimonial-column">
<div class="round-image">
<img src="http://www.harlowfencing.com/wp-content/uploads/2017/01/maintainedfencepanels-1170x878.jpg" alt="image1" />
<div class="testimonial-information">
<p> this is an example header which will be bold" </p>
</div>
<!-- /testimonial-information-->
<div class="main-testi-info">
<p> This is where a really long paragraph will go This is where a really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and number This is where a really long paragraph will go This
is where a really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and number This is where a really long paragraph will go This is where a really long paragraph will go This is
where a really long paragraph will go I ill continue to type out random letters and number This is where a really long paragraph will go This is where a really long paragraph will go This is where a really long paragraph will go I ill continue
to type out random letters and number
</p>
</div>
<!-- /main-testi-info-->
<div class="customer-location-testimonial">
<p> Mr Doe </p>
</div>
<!-- /customer-location-testimonial-->
</div>
<!-- /round-image> -->
</div>
<!-- /testimonial-column -->
<div class="testimonial-column">
<div class="round-image">
<img src="http://www.harlowfencing.com/wp-content/uploads/2017/01/maintainedfencepanels-1170x878.jpg" alt="image1" />
<div class="testimonial-information">
<p> this is an example header which will be bold" </p>
</div>
<!-- /testimonial-information-->
<div class="main-testi-info">
<p> This is where a really long paragraph will go This is where a really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and number This is where a really long paragraph will go This
is where a really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and number
</p>
</div>
<!-- /main-testi-info-->
<div class="customer-location-testimonial">
<p> Mr Doe - </p>
</div>
<!-- /customer-location-testimonial-->
</div>
<!-- /round-image> -->
</div>
<!-- /testimonial-column -->
<div class="testimonial-column">
<div class="round-image">
<img src="http://www.harlowfencing.com/wp-content/uploads/2017/01/maintainedfencepanels-1170x878.jpg" alt="image1" />
<div class="testimonial-information">
<p> this is an example header which will be bold" </p>
</div>
<!-- /testimonial-information-->
<div class="main-testi-info">
<p> This is where a really long paragraph will go This is where a really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and number This is where a really long paragraph will go This
is where a really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and number This is where a really long paragraph will go This is where a really long paragraph will go This is
where a really long paragraph will go I ill continue to type out random letters and number This is where a really long paragraph will go This is where a really long paragraph will go This is where a really long paragraph will go I ill continue
to type out random letters and number This is where a really long paragraph will go This is where a really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and number This is where
a really long paragraph will go This is where a really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and number This is where a really long paragraph will go This is where a
really long paragraph will go This is where a really long paragraph will go I ill continue to type out random letters and
</p>
</div>
<!-- /main-testi-info-->
<div class="customer-location-testimonial">
<p> Mr Doe </p>
</div>
<!-- /customer-location-testimonial-->
</div>
<!-- /round-image> -->
</div>
<!-- /testimonial-column -->
</div>
<!-- /grow -->