With three divs displayed inline, each containing an image, heading, paragraph, and anchor tags, a design issue arises. The inconsistency in text lengths under the images causes visual discrepancies when resizing the window. For example, while the first two divs display text in 4 rows, the third div's longer text extends to 5 rows, disrupting the alignment of elements. This problem persists at various window sizes due to the direct impact of text length on element positioning. Any suggestions for resolution?
One attempted solution involved wrapping the paragraph tag within another div and setting a specific height through CSS. However, this approach proved ineffective in resolving the issue. The 'span-1-of-3' class mentioned is part of an external grid system sourced online.
<div class="span-1-of-3 box">
<h3>New Products</h3>
<img src="img/girlleather.jpeg" alt="Woman in Leather" class="what-img">
<div class="text-box"><p>TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p></div>
<a href="#" class="btn">Check out</a>
</div>
<div class="span-1-of-3 box">
<h3>Fashion Show</h3>
<img src="img/fashionshow.jpeg" alt="Fashion Show" class="what-img">
<div class="text-box"><p>TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p></div>
<a href="#" class="btn">Check out</a>
</div>
<div class="span-1-of-3 box">
<h3>New: Watches</h3>
<img src="img/watches.jpg" alt="Watches" class="what-img">
<div class="text-box"><p>TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p></div>
<a href="#" class="btn">Check out</a>
</div>
.what-img {
width: 94%;
border-radius: 10px;
}
.new {
text-align: center;
}
.box {
display: inline-block;
margin-top: -20px;
}
.box h3 {
padding: 15px 0px 15px 0px;
letter-spacing: 4px;
font-size: 150%;
}
.box p {
padding: 15px 10px 15px 10px;
font-size: 17px;
word-break: break-word;
}
.text-box {
position: relative;
}
.box a {
text-decoration: none;
color: #fff;
padding: 10px 20px 10px 20px;
background-color: #923d0a;
border: 2px solid #000;
border-radius: 20px;
display: inline-block;
margin-top: 20px;
letter-spacing: 2px;
}