#Help with html css code

1 messages · Page 1 of 1 (latest)

icy mirage
#

So I've been trying to make this simple web page and for displaying the img i used display inline,inline block, flex but I can't get the img in a single row

Code snippet

Html
<div class="products">
<div class="box">
<img src="https://cdn.pixabay.com/photo/2023/06/01/06/21/perfume-8032808_640.jpg" width="200px" height="200px" >
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsum at fuga reprehenderit, iure aspernatur facilis molestias quaerat nulla vero.</p>
</div>
</div>

<div class="products">
    <div class="box">
        <img src="https://images.pexels.com/photos/965989/pexels-photo-965989.jpeg?auto=compress&cs=tinysrgb&w=600" width="200px" height="200px">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsum at fuga reprehenderit, iure aspernatur facilis molestias quaerat nulla vero.</p>
    </div>
</div>

<div class="products">
    <div class="box">
        <img src="https://images.pexels.lcom/photos/1190829/pexels-photo-1190829.jpeg?auto=compress&cs=tinysrgb&w=600" width="200px" height="200px">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsum at fuga reprehenderit, iure aspernatur facilis molestias quaerat nulla vero.</p>
    </div>
</div>

Css

.box{
border-color: black;
border-width: 2px;
border-style: solid;
display:inline-block;
width: 200px;
}

IMG_20241212_114205.jpg
cunning pine
#

try adding display:inline-block; to the css of products

icy mirage
#

Okay i will try that

cunning pine
#

Hope it helped

icy mirage
#

The images are displayed correctly but the<p> tag is not inside the box

willow wave
icy mirage
#

Yes like in a box with border

willow wave
#

okieee

#

in css just do

#

.p { border : 2px }

#

oh wait i think i got it!

#

@icy mirage
bring all 3 product class under the same section (let's say hello)
the in css do
.hello { display : flex }

icy mirage
#

It actually worked thank you ❤️❤️ @willow wave

#

But the first pic is the output i got but i want the later one from the ss

willow wave
#

oh nvm

#

i read it wrong lol

willow wave
#

do this

#

<figure>
<img src="imgae source here">
<figcaption> your p text here </figcaptin>
</figure>

icy mirage
#

I'll try this:D

willow wave
icy mirage
#

It worked i added fig and then styled it with display: inline -block and gave width
Thank yewwwwee<3

icy mirage
#

It's done damnnn thank youu alll ❤️❤️❤️❤️

icy mirage
willow wave