1. Inicio
  2. Pregunta y respuesta
  3. display: inline restablece altura y la anchura

display: inline restablece altura y la anchura

2011-04-22 22 views
19

He creado ejemplo en http://jsfiddle.net/GKnkW/2/display: inline restablece altura y la anchura

html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
</head> 
<body> 
     <div class="step">1</div>&nbsp; 
     <div class="step">2</div> 
     <br/><br/> 
     <div class="step1">3</div>&nbsp; 
     <div class="step1">4</div> 
</body> 
</html>

css

.step 
{ 
    height:150px; 
    width:150px;  
    background:yellow; 
    display:inline; 
} 

.step1 
{ 
    height:150px; 
    width:150px;  
    background:yellow; 
}

Quiero mostrar dos de lado divs a lado con su altura original y ancho (establecido en css) tan pronto como agregue pantalla: propiedad en línea para css parece perder altura y ancho definidos anteriormente. [compruebe los divs con # 1 y # 2 que parecen perder ajuste de altura y ancho]

¿Puede alguien señalar un error que parece estar haciendo o una solución para este comportamiento extraño?

Fuente

2011-04-22 N30

Respuesta

36

Los objetos en línea no tienen alturas ni anchuras. ¿Por qué los pones en línea para empezar? Probablemente desee flotarlos o usar bloque en línea.

Fuente

2011-04-22 20:05:45

+0

no estaba al tanto del comportamiento del objeto en línea. gracias por la iluminación cambiar la propiedad de visualización a bloque en línea resuelve el problema. – N30

+0

dang !! no puede aceptar la respuesta antes de los 11 minutos ... marcará su respuesta como aceptada después de eso .. – N30

0

Esto debe hacerlo

html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
</head> 
    <body> 
     <div class="step-section"> 
      <div class="step">1</div> 
      <div class="step">2</div> 
     </div> 
     <div class="step-section"> 
      <div class="step">3</div> 
      <div class="step">4</div> 
     </div> 
</body> 
</html>

css

.step 
{ 
    margin:5px; 
    height:150px; 
    width:150px;  
    background: yellow; 
    float:left; 
} 

.step-section 
{ 
    clear:both; 
}

Fuente

2011-04-22 20:16:04 Racter

5

Utilice esta:

display:inline-block;

Fuente

2015-12-20 21:24:42

+1

Por favor, edite su respuesta y explique por qué esto funciona. –

+0

inline-block lo mantiene en línea, pero le permite tomar propiedades de elemento de bloque como ancho y alto. –

Cuestiones relacionadas

 Cuestiones relacionadas