Home > Enterprise >  Fixed letters in a column
Fixed letters in a column

Time:09-21

https://photos.app.goo.gl/ExJFK7Ds9a67GpCA7

--- My code:

html:

 <section class="s2">
    <div class="box"> 
        <div class="one"> <a href="#">Solitaire</a> </div>
        <div class="two"> <p>Tacori Blooms perfectly wrap around the center stones for a seamless blanket of diamonds.</p> </div>
        <div class="three"> <img src="https://www.brides.com/thmb/4PCnLR-h1HZuGHEP0AFkF0o8EiM=/1190x1190/smart/filters:no_upscale()/sq-b609e1c6078c460abc25857ae151bf2e.jpg"> </div>
    </div>

    <div class="box"> 
        <div class="one"> <a href="#">Solitaire</a> </div>
        <div class="two"> <p>Tacori Blooms perfectly wrap around the center stones for a seamless blanket of diamonds.</p> </div>
        <div class="three"> <img src="https://www.brides.com/thmb/4PCnLR-h1HZuGHEP0AFkF0o8EiM=/1190x1190/smart/filters:no_upscale()/sq-b609e1c6078c460abc25857ae151bf2e.jpg"> </div>
    </div>

    <div class="box"> 
        <div class="one"> <a href="#">Solitaire</a> </div>
        <div class="two"> <p>Tacori Blooms perfectly wrap around the center stones for a seamless blanket of diamonds.</p> </div>
        <div class="three"> <img src="https://www.brides.com/thmb/4PCnLR-h1HZuGHEP0AFkF0o8EiM=/1190x1190/smart/filters:no_upscale()/sq-b609e1c6078c460abc25857ae151bf2e.jpg"> </div>
    </div>
</section>

CSS

.s2{
height: 50vh;
color:rgb(0, 0, 0);
background-color: rgb(231, 226, 226);
display: grid;
justify-items:center;
align-items: center;
grid-template-columns: 1fr 1fr 1fr;
text-align: center;
line-height: 20px;
}

.box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 40px;
width: fit-content;
}

.box a{
text-decoration: none;
font-size: 30px;
margin-bottom: 20px;
}

.box img{
height: 150px;
margin: 20px auto;
border: 1px black solid;
border-radius: 20px 20px;
}

As you can see, I have three lines in a column: <h1, <p and <img. when I reduce the text in

or delete all the text in <p, the <h1 and <img lines no longer align with the adjacent column. Please show me how to get them aligned.

CodePudding user response:

You could set the display to grid to maintain the height like so below...

.box {
display: grid;
grid-template-rows: 40px 40px 1fr;
}

CodePudding user response:

You can add a height: 100%; in .box and justify-content: space-between; or justify-content: space-around;

.box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    width: fit-content;
    height: 100%;
}
  •  Tags:  
  • css
  • Related