Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

GustavoBergonsi

Divs com float ficam em baixo da outra quando diminui o browser

Por , em Desenvolvimento frontend

Recommended Posts

GustavoBergonsi    0

GustavoBergonsi
Postado

Estou fazendo um site responsivo, coloquei 4 divs do lado da outra e coloquei as imagem para diminuir conforme o browser, só que as divs ficam uma em baixo das outras

 

Código html:

 

<div id="barra">
        
     </div>
     
   <br />
   <br />
   <br />
   <br />
     
           <div id="capa">
           
        </div>
        
             <div id="estrutura">
             
                 <div class="conteudo">
                 
               <img src="imagens/funcao1.png" alt="img-responsiva" /> 
               
               </div>
               
                <div class="conteudo">
                 
               <img src="imagens/funcao1.png" alt="img-responsiva" /> 
               
               </div>
               
                <div class="conteudo">
                 
               <img src="imagens/funcao1.png" alt="img-responsiva" /> 
               
               </div>
               
                <div class="conteudo_lado_direito">
                 
               <img src="imagens/funcao1.png" alt="img-responsiva" /> 
               
               </div>
                         </div>

Código CSS:

   #barra{
 width: 100%;
 height: 60px;
 background: #0098E1;
 position: fixed;
}
  
  #capa{
 width: 100%;
 height: 520px;
 background: #CCC;
 margin: auto;
}


   #estrutura{
 max-width: 1300px;
 width: 100%;
 margin: auto;
}


   .conteudo{
  max-width: 318px;
  width: 100%;
  height: auto;
  float: left;
  margin: 9px 9px 9px 0px;


}
         .conteudo img{
       max-width: 318px;   
            width: 100%;
            max-height: 250px;  
            min-height: auto;      
}


     .conteudo_lado_direito{
  max-width: 318px;
  width: 100%;
  height: auto;
  float: left;
  margin: 9px 0px 9px 0px;
}


         .conteudo_lado_direito img{
       max-width: 318px;   
            width: 100%;
            max-height: 250px;  
            min-height: auto;      }

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabriel-costa    1

gabriel-costa
Postado

Olá Gustavo,

 

Segue abaixo o código modificado e funcionando.

 

O que devemos fazer é trabalhar com a propriedade do css:

box-sizing: border-box

e modifcar a largura dos elementos .container, além de fazer mais algumas alterações.

 

Segue o código:

 

CSS

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

body {
	padding-top: 50px;
}

#barra{
	position: fixed;
	width: 100%;
	height: 60px;
	top:0;
	background: #0098E1;
}  
#capa{
	width: 100%;
	height: 520px;
	background: #CCC;
	margin: 20px auto 0;
}
#estrutura{
	display: table;
	max-width: 1170px;
	width: 100%;
	margin: 0 auto;
}
.conteudo{
	float: left;
	width: 25%;		
	padding: 9px 9px 9px 0px;
}
.conteudo:last-child { margin-right:0; }
.conteudo img{
	width: 100%;
	max-height: 250px;  
}

HTML

<body>
   <div id="barra">

   </div>

   <div id="capa">

   </div>

   <div id="estrutura">

	<div class="conteudo">

		<img src="http://placehold.it/350x150" alt="img-responsiva" /> 

	</div>

	<div class="conteudo">

		<img src="http://placehold.it/350x150" alt="img-responsiva" /> 

	</div>

	<div class="conteudo">

		<img src="http://placehold.it/350x150" alt="img-responsiva" /> 

	</div>

	<div class="conteudo">

		<img src="http://placehold.it/350x150" alt="img-responsiva" /> 

	</div>
    </div>

</body>

Qualquer dúvida pode perguntar.

 

Espero que eu tenha ajudado.

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito