Help to design in HTML/CSS

HTML-CSS
1

I have a problem. How can I make all a picture in the same one line? Because In my code if I have a long text they will push up a picture.

Capture
Capture1217×390 71.6 KB

2

Try giving the parent container a display:flex and apply align-items: flex-start

1 Like
3

I will try to do it

This is  code in CSS
*, html{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.Snews{
    width: 278px;
    display: inline-block;
    margin-right: 26px;
    position: relative;


}
.Snews img{
    width: 100%;
    cursor: pointer;
    height: 132px;
    margin-top: 26px;
    display: block;
    margin-bottom: 15px;
}
.head{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: 300;
    cursor: pointer;
    color: black;
    display: block;
    margin-top: 15px;
    text-align: justify;
    position: absolute;
    top: 147px
}
.theLink{
    text-decoration: none;
}
.time{
    color: red;
    position: absolute;
    top: 250px;
}
#f1{
    width: 938px;
}
4 
<body>
    <article>
        <div id="f1">
            <div class="Snews">
                <a href="">
                    <img src="uniform.jpg" alt="Uniform">
                </a>
                <h3 class="head">
                    <a href="https://www.google.com/" class="theLink">
                        Khám phá 10 bộ đồng phục nữ sinh khắp thế giới, trong đó Việt Nam là ấn tượng nhất
                        
                    </a>
                </h3>
                    <p id="time" class="time">5 giờ trước</p>
            </div>
            <!-- *********** -->
            <div class="Snews">
                <a href="">
                    <img src="Dog.jpg" alt="Dog">
                </a>
                <h3 class="head">
                    <a href="https://www.google.com/" class="theLink">
                        Sài Gòn "ra quân" bắt chó thả rông và đây là những điều bạn nên biết để "bảo vệ" cún cưng của mình
                    </a>
                </h3>
                <p id="time" class="time">4 giờ trước</p>
            </div>
            <!-- ********** -->
            <div class="Snews">
                <a href="">
                    <img src="disablePerson.jpg" alt="disable-Person">
                </a>
                <h3 class="head">
                    <a href="https://www.google.com/" class="theLink">
                        Câu chuyện về chàng đô vật đầy nghị lưc Zion Shaver - không có chân nhưng chưa từng ngừng tập luyện
                    </a>
                </h3>

                <p id="time" class="time">1 giờ trước</p>
            </div>
        </div>
    </article>
5

If you could provide a codepen link to your proj, it would be easy to sort it out, with only the css code it’s difficult to say anything