Imagens ao lado do menu lateral

Leonel57 · Setembro 14, 2020

Prezados,

Fiz um menu lateral mas ao colocar várias imagens ao lado elas ficam na parte de baixo.

Ele é um menu de produtos.

Poderiam me ajudar?

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title></title>
  <style type="text/css">
   .container {
      border: 1px solid gray;
      display: inline-block;
      float: right;
      margin-right: 150px;
      margin-left: 300px;
     border-spacing: 5px;
     padding: :5px;
     
    }

    p {
      text-align:center;
    }
    .menulateral{
      background-color:#5F9EA0;
      width: 250px;
      height: 1000px;
      
    }

      ul{
        list-style: none;
     }

    ul li a{
        display: block;
        font-size: 18px;
        font-family: 'Arial';
        padding: 10px;
        border-bottom: solid 1px #FFFFF0;
        color: #ccc;
        text-decoration: none; 
        
    }
    ul li span{
        float: right;
        padding-right: 10px;
      }

      ul li a:hover{
        background-color: #5b859a;
    }
    .conteudo{
      display: table;

    }

  </style>
</head>
<body>
  <nav class = menulateral>
        
            <ul>
                <li><a href="racao-cachorro.html">Ração para Cachorros</a></li>
                <li><a href="">Peticos e Ossos</a></li>
                <li><a href="">Casas e Tocas</a></li>
                <li><a href="">Coleiras</a></li>
                <li><a href="">Tapetes e Fraldas</a></li>
                <li><a href="">Briquendos</a></li>
                <li><a href="">Camas e Cobertores</a></li>
                <li><a href="">Portões</a></li>
                <li><a href="">Grades</a></li>
            </ul>

            <ul>
                  <li><a href="petisco-gato.html">Petiscos para Gatos</a></li>
                  <li><a href="areia-gato.html">Areia</a></li>
                  <li><a href="">Beleza e Limpeza</a></li>
                  <li><a href="">Arranhadores e Brinquedos</a></li>
                  <li><a href="">Coleiras e Peitorais</a></li>
                  <li><a href="">Roupas</a></li>
            </ul>

            <ul>
                  <li><a href="alimentacao-passaro.html">Alimentacao</a></li>
                  <li><a href="gaiola-passaro.html">Gaiolas</a></li>
                  <li><a href="">Puleiro</a></li>
                  <li><a href="">Acessorios</a></li>
                  <li><a href="">Farmácia</a></li>
            </ul>

            <ul>
                  <li><a href="alimentacao-peixe.html">Alimentacao</a></li>
                  <li><a href="aquario-peixe.html">Aquários</a></li>
                  <li><a href="">Decoração</a></li>
            </ul>

          </nav>

          <nav class = "conteudo">
              <div class="container">
                  <img src="imagem/areiagato.png" height="100" width="100"  />
                   <p>This is image 1</p>
              </div>
  <div class="container">
    <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100"  />
    <p>This is image 2</p>
  </div>
  <div class="container">
    <img src="imagem/quatree.png" height="100" width="100"  />
    <p>This is image 3</p>
  </div>
  <div class="container">
    <img src="imagem/areiagato.png" height="100" width="100"  />
    <p>This is image 1</p>
  </div>
  <div class="container">
    <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100"  />
    <p>This is image 2</p>
  </div>
  <div class="container">
    <img src="imagem/quatree.png" height="100" width="100"  />
    <p>This is image 3</p>
  </div>
  <div class="container">
    <img src="imagem/areiagato.png" height="100" width="100"  />
    <p>This is image 1</p>
  </div>
  <div class="container">
    <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" />
    <p>This is image 2</p>
  </div>
  <div class="container">
    <img src="imagem/quatree.png" height="100" width="100"  />
    <p>This is image 3</p>
  </div>
</div>
</nav>
</body>
</html>

Omar~ · Setembro 15, 2020

Primeiro: Faça correções na estrutura do HTML "está com erro", de cara vejo isso, mas pode haver mais outros tipos se levar isso em consideração.

23 horas atrás, Leonel57 disse:

<nav class = menulateral>

Segundo: Cuidado com definições levianas no CSS

23 horas atrás, Leonel57 disse:

p { text-align:center; }

Enfim, se eu entendi você que as imagens uma ao lado da outra certo?

Nesse caso esqueça das imagens olhe para a estrutura HTML como ela é! Blocos dentro de blocos etc, esse é o segredo de fazer qualquer layout com facilidade...

Citar

Então devo ter um bloco pai que abriga blocos filhos alinhados uns ao lado do outro.

Assim sendo posso adicionar o que quiser dentro dos filhos que esses herdarão a arquitetura de seus parentes.

<style>
    * {margin: 0; padding: 0; box-sizing: border-box}

    .lugar_das_images {
        text-align: center
    }
    .imagem_aqui {
        display: inline-block
    }
    .imagem_aqui > img {
        width: 100%;
        max-height: 250px /* Qual é altura máxima que a imagem pode ter? Isso influenciará em sua largura */
    }
</style>

<div class="lugar_das_images">
    <div class="imagem_aqui">
        <img src="????????.???" alt="Exemplo" />
        <p>Imagem em linha</p>
    </div>
    <div class="imagem_aqui">
        <img src="????????.???" alt="Exemplo" />
        <p>Imagem em linha</p>
    </div>
    <div class="imagem_aqui">
        <img src="????????.???" alt="Exemplo" />
        <p>Imagem em linha</p>
    </div>
</div>