-1

Coloquei uma div como relative, e as outras de dentro como absolute, mas somente a div 3 está aparecendo porque é a ultima acho, o problema é porque elas estão se agrupando assim? inserir a descrição da imagem aqui












<div id="ofertas">
    <ul>
        <div class="venda">
        <li>Casa 1</li>
        </div>


        <div class="venda">
        <li>Casa 2</li>
        </div>


        <div class="venda">
        <li>Casa 3</li>
        </div>


    </ul>
</div>

Código CSS

body{
padding: 0;
margin: 0;
}
#ofertas{
height: 100%;
width: 20%;
background-color: grey;
position: relative;
}

 #ofertas ul li {
list-style: none;
 }

.venda{
position: absolute;
height: 150px;
width: 80%;
background: blue;
display: inline-block;
padding: 0;
margin: 0 auto;
margin-bottom: 50px;
}

Observem que só aparece a div 3 porquê isso ocorre?

1
  • Acho que você colocou o inline-block no lugar errado, coloque ele na div principal Ofertas. Commented 28/03/2017 às 16:15

1 Resposta 1

0

Cara, o posicionamento absoluto é necessário? Se você trabalha com números relativos (%) e posicionamento absoluto, vai acabar dando problema. Nesse exemplo eu tirei esse posicionamento e simplifiquei.

body {
  padding: 0;
  margin: 0;
}

#ofertas {
  width: 20%;
  background-color: grey;
  position: relative;
}

#ofertas ul li {
  list-style: none;
}

.venda {
  height: 150px;
  width: 80%;
  background: blue;
  display: inline-block;
  padding: 0;
  margin: 0 auto;
  margin-bottom: 50px;
}

.vendaUm {
  background: red;
}

.vendaDois {
  background: green;
}

.vendaTres {
  background: yellow;
}
<div id="ofertas">
  <ul>
    <li class="venda vendaUm">
      Casa 1
    </li>


    <li class="venda VendaDois">
      Casa 2
    </li>


    <li class="venda vendaTres">
      Casa 3
    </li>


  </ul>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .