flutuador CSS e HTML perguntas

StackOverflow https://stackoverflow.com/questions/295611

  •  08-07-2019
  •  | 
  •  

Pergunta

Eu tenho algumas perguntas sobre CSS básico que eu era incapaz de compreender ou encontrar uma resposta para.

Em primeiro lugar, eu tentei colocar 3 tags div dentro de outra tag div. A primeira tag div principal que contém as outras 3 etiquetas teve set nada a fazer a não ser um tamanho, que foi 400px por 400px. Do outro 3 divs dentro, todos eram 20px por 20px, e 1 foi atribuído float:left, e os outros dois foram atribuídos um estilo que foi flutuador direita. Todos os atributos foram definidos dentro de um estilo, e as duas divs que estavam float:right foram atribuídos o mesmo estilo. Meu problema é que, dos 2 divs, aquele que veio por último no código, que aparecem em primeiro lugar em um navegador, e eu não entendia o raciocínio para isso.

Aqui está o código: 

<html>
<head>
<style>
#main{ 
    border: red 4px dashed;
    width: 25%
    height: 25%,
    }
#left{ 
    float: left;    
    width: 20px;
    height: 20px,
    }
#right{ 
    float: right;   
    width: 20px;
    height: 20px,
    }
</style>
</head>
<body>
<div id="main">
<div id="left">1</div>
<div id="right">2</div>
<div id="right">3</div>
</div>
</body>
</head>
</html>
Foi útil?

Solução

O meu problema é que, dos 2 divs, aquele que veio por último no código, iria aparecer em primeiro lugar em um navegador, e eu não compreender o raciocínio para isso.

Eu acho que você entendeu mal um "aparecem em primeiro lugar". Você define o seu divs de estar certo flutuante. Assim, um div "2", que é o primeiro em seu código, é a primeira a ser lançada direito, por isso vai primeiro para o lado direito. A "3" div é então flutuou, então eu vai para o lado esquerdo do "2" div - porque "2" foi pela primeira vez, ficou em primeiro lugar no lado direito da janela do navegador, e div "3" ficou em segundo colocar no lado direito da janela.

Neste caso, "o segundo lugar no lado direito da janela" significa "em primeiro lugar, à procura da esquerda"; -)

Outras dicas

No início, eu usaria classe e não id para os divs. Mas há também alguns erro de digitação está no css: 

#main{ 
    border: red 4px dashed;
    width: 25%;  /* <-- Missing ; */
    height: 25%; /* <-- change , to ; */
}
#left{ 
    float: left;        
    width: 20px;
    height: 20px; /* <-- change , to ; */
}
#right{ 
    float: right;       
    width: 20px;
    height: 20px; /* <-- change , to ; */
}

Eu não sei sobre o problema de camadas, mas você não pode ter dois elementos com o mesmo ID. Você provavelmente quer: 

...
<div class="right">2</div>
<div class="right">3</div>
...

e mudança #right para .right na CSS.

Eu acho que o problema é que você está usando id em vez de classe. Um ID é suposto ser original, assim que a segunda div com id = "right" é o único com esse id.

Você pode alterar o código de tal forma que você tem:

2

3

(em vez de id = "right")

E no css você teria que:

.right {

float: right;       

width: 20px;

height: 20px,

}

(em vez de #right) 

<html>
<head>
<style>
#main {
    border: 4px dashed red;
    display: block;
    overflow: hidden;
}
#left {
    float: left;
    width: 20px;
    height: 20px,
}
#right {
    float: right;
    width: 20px;
    height: 20px,
}
</style>
</head>
<body>
<div id="main">
  <div id="left">1</div>
  <div id="right">3</div>
  <div id="right">2</div>
</div>
</body>
</head>
</html>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top