images do not side by side with display-block, vertical align and float(CSS) just below each other

Question

images do not side by side with display-block, vertical align and float(CSS) just below each other

Asked 5 years, 9 months ago

Viewed 51 times

1

<!--Painel de produtos-->
    <div class="container paineis">
        <section class="painel novidades">
            <h2>Novidades</h2>
            <ol>
                <li>
                    <a href="produto1.html">
                        <figure>
                            <img src="img/produtos/miniatura1.png" alt="miniatura1">
                            <figcaption>Fuzz Cardigan por 199,90</figcaption>
                        </figure>
                    </a>
                </li>
            </ol>
            <ol>
                <li>
                    <a href="produto2.html">
                        <figure>
                            <img src="img/produtos/miniatura2.png" alt="miniatura2">
                            <figcaption>Fuzz Cardigan por 99,90</figcaption>
                        </figure>
                    </a>
                </li>
            </ol>
            <ol>
                <li>
                    <a href="produto3.html">
                        <figure>
                            <img src="img/produtos/miniatura3.png" alt="miniatura3">
                            <figcaption>Fuzz Cardigan por 56,90</figcaption>
                        </figure>
                    </a>
                </li>
            </ol>
            <ol>
                <li>
                    <a href="produto4.html">
                        <figure>
                            <img src="img/produtos/miniatura4.png" alt="miniatura4">
                            <figcaption>Fuzz Cardigan por 69,90</figcaption>
                        </figure>
                    </a>
                </li>
            </ol>
            <ol>
                <li>
                    <a href="produto5.html">
                        <figure>
                            <img src="img/produtos/miniatura5.png" alt="miniatura5">
                            <figcaption>Fuzz Cardigan por 14,90</figcaption>
                        </figure>
                    </a>
                </li>
            </ol>
            <ol>
                <li>
                    <a href="produto6.html">
                        <figure>
                            <img src="img/produtos/miniatura6.png" alt="miniatura6">
                            <figcaption>Fuzz Cardigan por 62,90</figcaption>
                        </figure>
                    </a>
                </li>
            </ol>
        </section>


.painel li  {
            display:    inline-block;
            vertical-align: top;
            width: 140px;
            margin: 2px;
            padding-bottom: 10px;
}
.painel h2  {
            font-size: 24px;
            font-weight:    bold;
            text-transform: uppercase;
            margin-bottom: 10px;
    }
.painel a   {
            color: #333;
            font-size: 14px;
            text-align: center;
            text-decoration:    none;
    }
.novidades  {
            background-color: #F5DCDC;
    }
.mais-vendidos  {
            background-color: #DCDCF5;
    }

Wellington posts his HTML to make it easier for someone to help you.

– OtavioCapel

2019/02/13 at 17:14
you want to put the image next to the text is this?

– Marcos Vinicius Leão

2019/02/13 at 17:20

2 answers

Browser other questions tagged html5 css3

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

by hugocsl • **65,517** points · Answer 1 · 2019-02-13T17:31:09+00:00

Your problem is that you opened several <ol> with only one <li> within...

This is not good practice:

<ol>
    <li>
        item 1
    </li>
</ol>
<ol>
    <li>
        item 2
    </li>
</ol>

The right thing would be

<ol>
    <li>
        item 1
    </li>
    <li>
        item 2
    </li>
</ol>

See that the user-agent by default puts display:block in <ol>

And as an element of the kind block takes up 100% of the line ends up every <ol></ol> that you open and close makes the next <ol></ol> always start at the bottom line

So just remove those <ol> Your HTML add-ons already solved, didn’t even need to touch the CSS since your .painel li {display: inline-block; was already set to be inline.

.painel li {
  display: inline-block;
  vertical-align: top;
  width: 140px;
  margin: 2px;
  padding-bottom: 10px;
}

.painel h2 {
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.painel a {
  color: #333;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}

.novidades {
  background-color: #F5DCDC;
}

.mais-vendidos {
  background-color: #DCDCF5;
}

<!--Painel de produtos-->
<div class="container paineis">
<section class="painel novidades">
  <h2>Novidades</h2>
  <ol>
    <li>
      <a href="produto1.html">
        <figure>
          <img src="img/produtos/miniatura1.png" alt="miniatura1">
          <figcaption>Fuzz Cardigan por 199,90</figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="produto2.html">
        <figure>
          <img src="img/produtos/miniatura2.png" alt="miniatura2">
          <figcaption>Fuzz Cardigan por 99,90</figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="produto3.html">
        <figure>
          <img src="img/produtos/miniatura3.png" alt="miniatura3">
          <figcaption>Fuzz Cardigan por 56,90</figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="produto4.html">
        <figure>
          <img src="img/produtos/miniatura4.png" alt="miniatura4">
          <figcaption>Fuzz Cardigan por 69,90</figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="produto5.html">
        <figure>
          <img src="img/produtos/miniatura5.png" alt="miniatura5">
          <figcaption>Fuzz Cardigan por 14,90</figcaption>
        </figure>
      </a>
    </li>
    <li>
      <a href="produto6.html">
        <figure>
          <img src="img/produtos/miniatura6.png" alt="miniatura6">
          <figcaption>Fuzz Cardigan por 62,90</figcaption>
        </figure>
      </a>
    </li>
  </ol>
</section>

by Lodi • **1,075** points · Answer 2 · 2019-02-13T17:22:13+00:00

Just add the inline-block in the element <ol>

.painel li  {
            display:    inline-block;
            vertical-align: top;
            width: 140px;
            margin: 2px;
            padding-bottom: 10px;
}
.painel h2  {
            font-size: 24px;
            font-weight:    bold;
            text-transform: uppercase;
            margin-bottom: 10px;
    }
.painel a   {
            color: #333;
            font-size: 14px;
            text-align: center;
            text-decoration:    none;
    }
.novidades  {
            background-color: #F5DCDC;
    }
.mais-vendidos  {
            background-color: #DCDCF5;
    }
    
    ol{
    display: inline-block;
  }

<!--Painel de produtos-->
    <div class="container paineis">
        <section class="painel novidades">
            <h2>Novidades</h2>
            <ol>
                <li>
                    <a href="produto1.html">
                        <figure>
                            <img src="img/produtos/miniatura1.png" alt="miniatura1">
                            <figcaption>Fuzz Cardigan por 199,90</figcaption>
                        </figure>
                    </a>
                </li>
            </ol>
            <ol>
                <li>
                    <a href="produto2.html">
                        <figure>
                            <img src="img/produtos/miniatura2.png" alt="miniatura2">
                            <figcaption>Fuzz Cardigan por 99,90</figcaption>
                        </figure>
                    </a>
                </li>
            </ol>
            <ol>
                <li>
                    <a href="produto3.html">
                        <figure>
                            <img src="img/produtos/miniatura3.png" alt="miniatura3">
                            <figcaption>Fuzz Cardigan por 56,90</figcaption>
                        </figure>
                    </a>
                </li>
            </ol>
            <ol>
                <li>
                    <a href="produto4.html">
                        <figure>
                            <img src="img/produtos/miniatura4.png" alt="miniatura4">
                            <figcaption>Fuzz Cardigan por 69,90</figcaption>
                        </figure>
                    </a>
                </li>
            </ol>
            <ol>
                <li>
                    <a href="produto5.html">
                        <figure>
                            <img src="img/produtos/miniatura5.png" alt="miniatura5">
                            <figcaption>Fuzz Cardigan por 14,90</figcaption>
                        </figure>
                    </a>
                </li>
            </ol>
            <ol>
                <li>
                    <a href="produto6.html">
                        <figure>
                            <img src="img/produtos/miniatura6.png" alt="miniatura6">
                            <figcaption>Fuzz Cardigan por 62,90</figcaption>
                        </figure>
                    </a>
                </li>
            </ol>
        </section>