Create a div with links to social networks

Question

Create a div with links to social networks

Navigation

#1 by (1 votes)

1

Hello, good afternoon.

I would like a help to create a div with 3 images for social networks, but I would like them to be divided equally, as in the image below:

SofarmycodeHTMLandCSSlookslikethis:

<divclass="footer-img">
    <div class="figure">
        <a href="#" target="_blank">
            <figure>
              <img src="instagram.png" alt="#" style="width: 25px;">
              <figcaption>LEGENDA</figcaption>
            </figure>
        </a>
    </div>

    <div class="figure">
        <a href="#" target="_blank">
            <figure>
              <img src="youtube.png" alt="#" style="width: 35px;">
              <figcaption>LEGENDA</figcaption>
            </figure>
        </a>
    </div>

    <div class="figure">
        <a href="#" target="_blank">
            <figure>
              <img src="facebook.png" alt="#">
              <figcaption>LEGENDA</figcaption>
            </figure>
        </a>
    </div>
</div>

<style type="text/css">
    .footer-img {
        background-color: #F09300;
        color: #FFF; 
        width: 100%;
    }

    .figure {
        display: inline-block; 
        width: 20%;
        vertical-align: middle;
    }

    .figure:hover {
        background-color: #f7c27b;
        cursor: pointer;
    }

    .figure a {
        text-decoration: none;
        color: #FFF !important;
    }

    .figure img {
        display: inline !important;
        width: 25px;
    }

    .figure figcaption {
        display: inline !important;
        vertical-align: super !important;
    }
</style>

Thank you.

html5 css

asked by anonymous 30.08.2018 / 19:39

1 answer

How to create the programming logic to disable a button after an action? mysqli num_rows expects parameter 1 to be mysqli_result

score 1 · Accepted Answer

You can replace display:inline-block with flex , and split div s into equal sizes using width with calc this way width: calc(100% / 3)

See how it looks in the template below.

.footer-img {
    background-color: #F09300;
    color: #FFF; 
    width: 100%;
    display: flex;
}

.figure {
    vertical-align: middle;
    width: calc(100% / 3);
}

.figure:hover {
    background-color: #f7c27b;
    cursor: pointer;
}

.figure a {
    text-decoration: none;
    color: #FFF !important;
}

.figure img {
    display: inline !important;
    width: 25px;
}

.figure figcaption {
    display: inline !important;
    vertical-align: super !important;
}

<div class="footer-img">
    <div class="figure">
        <a href="#" target="_blank">
            <figure>
                <img src="instagram.png" alt="#" style="width: 25px;">
                <figcaption>LEGENDA</figcaption>
            </figure>
        </a>
    </div>

    <div class="figure">
        <a href="#" target="_blank">
            <figure>
                <img src="youtube.png" alt="#" style="width: 35px;">
                <figcaption>LEGENDA</figcaption>
            </figure>
        </a>
    </div>

    <div class="figure">
        <a href="#" target="_blank">
            <figure>
                <img src="facebook.png" alt="#">
                <figcaption>LEGENDA</figcaption>
            </figure>
        </a>
    </div>
</div>