Preguntas flotantes de CSS y HTML

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

  •  08-07-2019
  •  | 
  •  

Pregunta

Tengo algunas preguntas sobre CSS básico que no pude entender o no encontré una respuesta.

Primero, intenté colocar 3 etiquetas div dentro de otra etiqueta div. La primera etiqueta div principal que contenía las otras 3 etiquetas no tenía nada establecido excepto un tamaño, que era 400px por 20px. De los otros 3 divs en el interior, todos fueron float:left por float:right, y a 1 se le asignó <=>, y a los otros dos se les asignó un estilo que era flotante a la derecha. Todos los atributos se definieron dentro de un estilo, y los dos divs que fueron <=> se les asignó el mismo estilo. Mi problema es que de los 2 divs, el último que apareció en el código, aparecería primero en un navegador, y no entendí el razonamiento de esto.

Aquí está el 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>
¿Fue útil?

Solución

  

Mi problema es que de los 2 divs,   el que vino último en el código,   aparecería primero en un navegador, y yo   no entendí el razonamiento para   esto.

Creo que has entendido mal un " aparece primero " ;. Estableces Tus divs para que floten a la derecha. Entonces un & Quot; 2 & Quot; div, que es PRIMERO en su código, es PRIMERO en flotar a la derecha, por lo que va primero al lado derecho. A & "; 3 &"; div entonces flota, así que voy al lado izquierdo de & "; 2 &"; div - porque " 2 " fue primero, ocupó el primer lugar en el lado derecho de la ventana del navegador, y div " 3 " tomó el segundo lugar en el lado derecho de la ventana.

En este caso & "; segundo lugar en el lado derecho de la ventana &"; significa " primero, mirando desde la izquierda " ;-)

Otros consejos

Al principio, usaría class y no id para los divs. Pero también hay algunos errores tipográficos en el 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 ; */
}

No sé sobre el problema de las capas, pero no puede tener dos elementos con la misma ID. Probablemente quieras: 

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

y cambie #right a .right en el CSS.

Creo que tu problema es que estás usando id en lugar de clase. Se supone que un ID es único, por lo que el segundo div con id = & Quot; right & Quot; es el único con esa identificación.

Puede cambiar su código de modo que tenga:

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

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

(en lugar de id = " right ")

Y en el css tendrías:

.right {

float: right;       

width: 20px;

height: 20px,

}

(en lugar 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 bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top