How can I fix an image to the bottom of its article?-CodePudding

I'm almost finished with a little site, but I'm having an issue with uniformity. So there is an image located at the bottom of every article in my code, but I've currently got it set up to where the image is directly under the paragraph preceding it. This becomes an issue when certain paragraphs are shorter than others, leading to some images leaving blank space below them when they were supposed to be at the bottom. How can I fix this? I've tried setting articles to position: relative and the images to position: absolute but that just moves the images to the right and stretches them horizontally. Help is appreciated! I can share the full code if needed, but it's quite long, so I trimmed it down to the parts directly related to the issue.

Code samples: HTML:

            <div >
            <article>
            <div >
                <h2>Hollow Knight</h2>
                <p >Difficult, Souls-like</p>
                <hr>
            </div>
                <p>"Forge your own path in Hollow Knight! An epic action adventure through a vast ruined kingdom of insects and heroes. Explore twisting caverns, battle tainted creatures and befriend bizarre bugs, all in a classic, hand-drawn 2D style."</p>
                <img src="hollow-knight.png">
            </article>
            <article>
            <div >
                <h2>Celeste</h2>
                <p >Difficult, Amazing Soundtrack</p>
                <hr>
            </div>
                <p>"Help Madeline survive her inner demons on her journey to the top of Celeste Mountain, in this super-tight platformer from the creators of TowerFall. Brave hundreds of hand-crafted challenges, uncover devious secrets, and piece together the mystery of the mountain."</p>
                <img src="celeste.png">
            </article>
            <article>
            <div >
                <h2>Ori and the Blind Forest/Will of the Wisps</h2>
                <p >Amazing Soundtrack, Metroidvania</p>
                <hr>
            </div>
                <p>"Ori and the Blind Forest tells the tale of a young orphan destined for heroics, through a visually stunning action-platformer crafted by Moon Studios for PC."</p>
                <img src="ori.png">
            </article>
        </div>

And CSS:

body {
    margin: 0;
    padding-top: 150;
    padding-bottom: 0;
    background-color: rgb(206, 238, 197);
}

article {
    background-color: #67aa69;
    text-align: center;
    width: 30%;
    padding: 2;
    position: relative;
    border-radius: 10%;
    border-style: solid;
    border-color: #67aa69;
    border-width: 5px;
    
}

.section {
    text-align: center;
    margin-top: 50px;
    font-family: 'Andika', sans-serif;
}

.games {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 50px;
    margin-bottom: 50px;
    min-height: 450px;
}

img {
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    width: 100%;
    height: 250px;
}

CodePudding user response：

try to avoid using position relative and absolute unless you really need to, instead in your case just add the following to your article in css

display: flex; flex-direction: column; justify-content: space-around;

body {
    margin: 0;
    padding-top: 150;
    padding-bottom: 0;
    background-color: rgb(206, 238, 197);
}

article {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    
    background-color: yellow;
    text-align: center;
    width: 30%;
    padding: 2;
    border-radius: 10%;
    border-style: solid;
    border-color: #67aa69;
    border-width: 5px;
    
}

.section {
    text-align: center;
    margin-top: 50px;
    font-family: 'Andika', sans-serif;
}

.games {
    background: red;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 50px;
    margin-bottom: 50px;
    min-height: 450px;
}

img {
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    width: 100%;
    height: 250px;
}

<div >
            <article>
            <div >
                <h2>Hollow Knight</h2>
                <p >Difficult, Souls-like</p>
                <hr>
            </div>
                <p>"Forge your own path in Hollow Knight! An epic action adventure through a vast ruined kingdom of insects and heroes. Explore twisting caverns, battle tainted creatures and befriend bizarre bugs, all in a classic, hand-drawn 2D style."</p>
                <img src="hollow-knight.png">
            </article>
            <article>
            <div >
                <h2>Celeste</h2>
                <p >Difficult, Amazing Soundtrack</p>
                <hr>
            </div>
                <p>"Help Madeline survive her inner demons on her journey to the top of Celeste Mountain, in this super-tight platformer from the creators of TowerFall. Brave hundreds of hand-crafted challenges, uncover devious secrets, and piece together the mystery of the mountain."</p>
                <img src="celeste.png">
            </article>
            <article>
            <div >
                <h2>Ori and the Blind Forest/Will of the Wisps</h2>
                <p >Amazing Soundtrack, Metroidvania</p>
                <hr>
            </div>
                <p>"Ori and the Blind Forest tells the tale of a young orphan destined for heroics, through a visually stunning action-platformer crafted by Moon Studios for PC."</p>
                <img src="ori.png">
            </article>
        </div>

there is a link you might find useful https://ishadeed.com/article/less-absolute-positioning-modern-css/

best of luck

CodePudding user response：

You are on the right track! Try also adding a left: 0; and bottom: 0; to your absolute positioned <img>

article {
    position: relative;
}

img {
    position: absolute;
    left: 0;
    bottom: 0;
}