1
By placing an image in the upper right corner on my page, the image that is lower on the left side misaligned and went down.
Image below before placing the images in the upper right:
Image after placing image in the upper right:
HMTL:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="conteudo_ordenar">
<h3 class="titulo_ordenar">Ordenar Pesquisa</h3>
<p class="ordena"><span class="caret"></span> Marca</p>
<p class="ordena"><span class="caret"></span> Tamanho</p>
<p class="ordena"><span class="caret"></span> Cor</p>
<p class="ordena"><span class="caret"></span> Faixa De Preço</p>
</div>
</div>
<div class="col-sm-9 col-md-9">
<h3 class="titulo">CAMISETAS</h3>
</div>
<div class="col-sm-3 col-md-3">
<div class="linha">
<img src="imagens/camisa_1.JPG" alt="camisa1" class="imagem_teste" />
<br />
<a href="#">
<p class="descricao_produto">Calça Jeans Armani</p>
<h4 class="preco"> A partir de R$134,99</h4>
<button class="saiba_mais" id="saiba_mais1">SAIBA MAIS</button>
</a>
</div>
</div>
<div class="col-sm-3 col-md-3">
<div class="linha">
<img src="imagens/camisa_2.JPG" alt="camisa2" class="imagem_teste" />
<br />
<a href="#">
<p class="descricao_produto">Calça Jeans Armani</p>
<h4 class="preco"> A partir de R$134,99</h4>
<button class="saiba_mais" id="saiba_mais1">SAIBA MAIS</button>
</a>
</div>
</div>
<div class="col-sm-3 col-md-3">
<div class="linha">
<img src="imagens/camisa_3.JPG" alt="camisa3" class="imagem_teste" />
<br />
<a href="#">
<p class="descricao_produto">Calça Jeans Armani</p>
<h4 class="preco"> A partir de R$134,99</h4>
<button class="saiba_mais" id="saiba_mais1">SAIBA MAIS</button>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<img src="imagens/shipping.jpg" alt="iamgem embaixo do ordenar" class="imagem_ordena">
</div>
</div>
CSS
.saiba_mais{
background-color: #00008B;
color: white;
padding: 16px;
font-size: 13px;
border: none;
width: 100%;
margin-top: 20px;
}
.linha {
border: 1px solid #fff;
height: 390px;
display: inline-block;
width: 99%;
}
.imagem_teste{
width: 90%;
}
.descricao_produto{
color:black;
font-weight: 700;
}
.preco{
color:red;
}
.linha a{
display: none;
}
.linha:hover a{
display: inline-block;
width: 100%;
}
.linha:hover{
border-color: #E0E0DA;
}
.imagem_ordena{
width: 100%;
}
.conteudo_ordenar{
border:1px solid #E0E0DA;
border-top: 3px solid #00008B;
border-bottom: 3px solid #00008B;
height: 300px;
overflow: auto; /* isto para evitar o conteúdo transborde o "container", por causa da altura limite de "200px height" definido acima */
}
.titulo_ordenar{
background-color: #00008B;
color:White;
text-align: center;
margin: 0; /* Aplica um reset à margem automática do título atribuída pelo Navegador */
height: 50px;
}
.ordena{
outline: 1px solid #E0E0DA;
padding: 12px;
}
This question has not been asked before?
– I_like_trains
I deleted the previous question because I had not put part of the code
– User1999