How do I add 3 side-by-side images and captions on top and bottom in css

Question

How do I add 3 side-by-side images and captions on top and bottom in css

Asked 4 years, 3 months ago

Viewed 164 times

-1

.produto{
    display: table;
    text-align: center;
    border-top: none;
    padding-top: 0;
    float: inline-start;
}

.prod1{
    display: table-caption;
    color: rgb(46, 146, 228);
    float: left;
    caption-side: top;
    padding: 5px;
    border: thin solid;
    margin: 0px 10px 10px 0px;
    width: 100%;
    clear: both;
}

.prod2{
    display: table-caption;
    color: rgb(46, 146, 228);
    clear: center;
    caption-side: top;
    padding: 5px;
    border: thin solid;
    margin: 0px 10px 10px 0px;
    width: 100%;
    clear: both;
}

.prod3{
    display: table-caption;
    color: rgb(46, 146, 228);
    float: right;
    caption-side: top;
    padding: 5px;
    border: thin solid;
    margin: 0px 10px 10px 0px;
    width: 100%;
}

<div class="produto">
    <span class="prod1">PRODUTO 1
        <img src="imgs/produto-1.jpg" alt="" title="PRODUTO 1">
    </span>
    <span class="prod2">PRODUTO 2
        <img src="imgs/produto-2.jpg" alt="" title="PRODUTO 2">
    </span>
    <span class="prod3">PRODUTO 3
        <img src="imgs/produto-3.jpg" alt="" title="PRODUTO 3">
    </span>
</div>

2 answers

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2020-03-11T16:40:14+00:00

It makes no sense to use different classes in each div’s daughter .produto. Because the way you’re doing, all 3 classes you’ve created have the same properties with equal values. Classes should not be used this way. They usually serve to identify groups of elements that have the same properties. Then just use one class for the 3 Divs.

You can use flexbox to do this in a much simpler way and still maintain responsiveness (avoid using float in these cases). It is also necessary to define a dimension for the images. I did so:

.prod img{
   max-width: 100%;
}

See that images will be at most 100% the width of the div .prod. All you have to do is watch the property max-width which should have a maximum value up to the original width of the image, otherwise it can "burst" if the width of the div is larger. For example, if images have a maximum width of 300 pixels, you should include the property max-width: 300px;. This will depend a lot on your layout.

To add text above and below the image, you can use <h3> in the top text (already in bold) or other <h*> (goes from h1 to h6. The smaller the number, the larger the text) and <p> in the text below.

Behold:

.produto{
    display: flex;
    border-top: none;
    padding-top: 0;
}

.prod{
   flex: 1; /*distribui as 3 divs dentro do conteiner com larguras iguais*/
   margin: 5px; /*coloca uma margem entre elas*/
   text-align: center;
}

.prod img{
   max-width: 100%;
}

<div class="produto">
    <span class="prod">
         <h3>PRODUTO 1</h3>
        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="" title="PRODUTO 1">
        <p>
            texto abaixo
        </p>
    </span>
    <span class="prod">
         <h3>PRODUTO 2</h3>
        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="" title="PRODUTO 2">
        <p>
            texto abaixo
        </p>
    </span>
    <span class="prod">
         <h3>PRODUTO 3</h3>
        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="" title="PRODUTO 3">
        <p>
            texto abaixo
        </p>
    </span>
</div>

by André Junior • 93 points · Answer 2 · 2020-03-11T02:38:29+00:00

        h1{color: red; text-align: center;}
        #produtos {
            width: 800px;
            height: 350px;
            margin: 0 auto;
        }
        .produto1, .produto2, .produto3 {
            width: 200px;
            height: 300px;
            background: ;
            float: left;
            padding: 0 20px 10px 0;
            margin-left: 20px;
            text-align: center;
        }
        .preco { color: #A4A4A4; }
        span { color: #0080FF; }
        p { color:  #0080FF; text-transform: uppercase;}



<body>
    <h1>Produtos </h1>
    <hr>
    <hr>
    <div id="produtos">
        <div class="produto1">
            <p> Produto 1 </p>
            <img src="1.jpg" alt="">
            <p class="preco">Por Apenas <br><span> R$ 00,00</span></p>
        </div>
        <div class="produto2">
            <p> Produto 2 </p>
            <img src="1.jpg" alt="">
            <p class="preco">Por Apenas <br><span> R$ 00,00</span></p>
        </div>
        <div class="produto3">
            <p> Produto 3 </p>
            <img src="1.jpg" alt="">
            <p class="preco">Por Apenas <br><span> R$ 00,00</span></p>
        </div>
    </div>

    <hr>
    <hr>
</body>