2

Eu possuo 4 divs na minha pagina, uma ao lado da outra, como eu posso fazer, para que a ultima div seja alinhada a esquerda na linha de baixo ?

inserir a descrição da imagem aqui

Meu Codigo:

     <!-- DIV 1 -->
     <div style="float: left; width: 100px; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">1</div>

     <!-- DIV 2 -->
     <div style="float: left; width: 100px; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">2</div>

     <!-- DIV 3 -->
     <div style="float: left; width: 100px; height: 100px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">3</div>

     <!-- DIV 4 -->
     <div style="float: left; width: 100px; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; clear: Left; border-color: #FFFFFF;">4</div>

     <!-- DIV 5 -->
     <div style="float: left; width: 100px; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">5</div>

Como ficou depois de inserir o clear:left.

inserir a descrição da imagem aqui

Problema 2 - Após o uso do ( clear:left ).

Surgiu outro problema, eu preciso encaixar as div's conforme a imagem abaixo, eu quero fazer isso utilizando apenas CSS e sem utilizar o margin-top, eu preciso fazer isso utilizando alguma solução em CSS puro. Os numeros dentro das DIV's se refere a sequència em que as DIV's são exibidas pelo PHP vindo do MySql.

inserir a descrição da imagem aqui

Obrigado

3
  • 1
    É isto que procuras? -> jsfiddle.net/r7Lwtu6y
    – Sergio
    Commented 6/11/2016 às 20:23
  • Exato, mas eu tive uma problema, como a div do final é mais larga que as outras, quando ela pula de linha, ela não esta encaixando com a de cima, fica um espaço, oque eu posso usar ? Atualizei meu topico.
    – abduzeedo
    Commented 6/11/2016 às 20:38
  • Obrigado pela dica.
    – abduzeedo
    Commented 6/11/2016 às 20:52

1 Resposta 1

2

Bom em css e html os elementos se relacionam, para está solução específica podes fazer como abaixo, entretanto pode ser necessário adaptar, sem o código inteiro não tenho como ir além...

<div style="float: left; width: 100; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">1</div>
 <div style="float: left; width: 100; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">2</div>
 <div style="float: left;width: 100; height: 70px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">3</div>

  <!-- Fazer essa div abaixo se alinha a esquerda na linha de baixo -->     

 <div style="position:absolute; margin-top:55px; width: 100; height: 50px; background-color: #CCCCCC; border-style: solid; border-size: 1; border-color: #FFFFFF;">4</div>

Vamos tentar outro modo:

div
{
    float:left;  
    height:50px;
    width:100px;
    border: 1px solid #000000;
}
#id4
{
    clear:left;
}
#id3
{
   height:102px;
   margin-top:-52px;
}
<div>1</div>
<div>2</div>
<div  id="id4">4</div>
<div>5</div>
<div id="id3">3</div>

Ou mais uma opção onde defino um width para o content e assim usar o float:right, mas é como eu digo cada caso é um caso:

#content
{
    width: 306px;
    height: auto;
}
div
{
    float:left;  
    height:50px;
    width:100px;
    border: 1px solid #000000;
}
#id3
{
    float:right;
    height:102px;
}
<div id="content">
    <div>1</div>
    <div>2</div>
    <div id="id3">3</div>
    <div>4</div>
    <div>5</div>
</div>

12
  • Eu testei esse codigo, mas não funcionou muito bem, para registros automaticos vindos do banco de dados, teria como fazer sem utilizar o mar-gin-top ? algo mais automatico ?
    – abduzeedo
    Commented 6/11/2016 às 23:08
  • Cara fica difícil dizer, sem termos o problema explícito, o que quero dizer é :No inicio era só jogar a div para baixo (resolve com o clear), ah mas a última div é maior,,, e assim vai... Com essas rasas informações que passou não há como ir além disso... E para falar a verdade, os dados do banco ao meu ver não deveriam influenciar, pois o front-end é o molde de exibição das informações, não importa quais sejam as informações (a grosso modo)... Então seria importante você editar e colocar mais informações, de como sua página pretende funcionar...
    – MagicHat
    Commented 6/11/2016 às 23:18
  • Pronto MagicHat, já alterei o tópico e explica com detalhes qoeu desejo. Obrigado
    – abduzeedo
    Commented 8/11/2016 às 17:35
  • Repara que no seu código tem 4 divs e no exemplo visual tem 5...
    – MagicHat
    Commented 8/11/2016 às 18:41
  • Pronto Magic Hat, Alterei o código;
    – abduzeedo
    Commented 8/11/2016 às 19:10

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 .