CSS: display: inline-block y posicionamiento: absoluta

Por favor, considere el siguiente código:CSS: display: inline-block y posicionamiento: absoluta

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <style type="text/css"> 
     .section { 
      display: block; 
      width: 200px; 
      border: 1px dashed blue; 
      margin-bottom: 10px; 
     } 
     .element-left, 
     .element-right-a, 
     .element-right-b { 
      display: inline-block; 
      background-color: #ccc; 
      vertical-align: top; 
     } 
     .element-right-a, 
     .element-right-b { 
      max-width: 100px; 
     } 
     .element-right-b { 
      position: absolute; 
      left: 100px; 
     } 
    </style> 
    <title>test</title> 
</head> 
<body> 
    <div class="section"> 
     <span class="element-left">some text</span> 
     <span class="element-right-a">some text</span> 
    </div> 
    <div class="section"> 
     <span class="element-left">some text</span> 
     <span class="element-right-a">some more text to force line wrapping</span> 
    </div> 
    <div class="section"> 
     <span class="element-left">some text</span> 
     <span class="element-right-b">some text</span> 
    </div> 
    <div class="section"> 
     <span class="element-left">some text</span> 
     <span class="element-right-b">some more text to force line wrapping</span> 
    </div> 
    <div class="section"> 
     <span class="element-left">some text</span> 
     <span class="element-right-b">some more text to force line wrapping</span> 
    </div> 
</body> 
</html>

El elemento de posicionamiento absoluto aparentemente hace que la caja que contiene "olvidar", que la altura que necesita.

Necesito el posicionamiento absoluto dentro de la casilla "sección", ¿hay alguna otra solución para esto?

gracias de antemano, geronimo

edición

Uso de tablas no es realmente una opción, necesito algún tipo de "multi-nivel"/"anidado" de diseño, donde la segunda columna es siempre en la misma posición:

 
| some text in first column  | some text in 2nd column 
    | some indented text   | 2nd column 
    | also indented     | 2nd col 
    | even more indent   | 2nd column with a lot of text that 
            | makes it wrap 
    | text       | ... 
| blah blah      | ...

(por supuesto whithout el carácter "|" s)

Fuente

2011-02-18 geronimo

Gah, es difícil visualizar lo que comprueba esto :) http://jsfiddle.net/Kyle_Sevenoaks/YTUnM/ ¿Cuál es tu resultado deseado? – Kyle

Cuando usa position:absolute;, el elemento se saca del flujo de página normal. Por lo tanto, ya no afecta el diseño de su elemento contenedor. Por lo tanto, el elemento contenedor no tiene en cuenta su altura, por lo que si no hay nada más para establecer la altura, entonces el contenedor tendrá una altura cero.

Además, la configuración display:inline-block; no tiene ningún sentido para un elemento que es position:absolute;. De nuevo, esto se debe a que el posicionamiento absoluto quita el elemento del flujo de la página. Esto está en desacuerdo con inline-block, que solo existe para afectar la forma en que el elemento se ajusta al flujo de la página. Todos los elementos que son position:absolute; se tratan automáticamente como display:block, ya que es el único modo de visualización lógica para el posicionamiento absoluto.

Si necesita posicionamiento absoluto, entonces la única solución a su problema de altura es establecer la altura de la caja del contenedor.

Sin embargo, sospecho que podría prescindir del posicionamiento absoluto.

Parece que lo que está tratando de hacer es colocar el segundo <span> en cada bloque en una posición fija en el bloque, para que se alineen.

Este es un problema clásico de CSS.En los "viejos tiempos malos", los diseñadores web lo habrían hecho usando una tabla, con anchos fijos en las celdas de la tabla. Obviamente, esta no es la respuesta para los diseñadores web actuales, pero es algo que causa muchas preguntas.

Hay varias maneras de hacerlo con CSS.

Lo más fácil es establecer los elementos <span> en display:inline-block;, y darles un ancho fijo.

por ejemplo:

<div class='section'> 
    <span class="element-left">some text</span> 
    <span class="element-right">some text</span> 
</div>

con el siguiente CSS:

.section span {display:inline-block;} 
.element-left {width:200px;} 
.element-right {width:150px;}

[EDIT] después de la pregunta ha sido actualizado

Así es como me gustaría lograr lo que se está pidiendo ahora :

<div class='section'> 
    <span class="element-left"><span class='indent-0'>some text</span></span> 
    <span class="element-right">some text</span> 
</div> 
<div class='section'> 
    <span class="element-left"><span class='indent-1'>some text</span></span> 
    <span class="element-right">some text</span> 
</div> 
<div class='section'> 
    <span class="element-left"><span class='indent-2'>some text</span></span> 
    <span class="element-right">some text</span> 
</div>

con el siguiente CSS:

.section span {display:inline-block;} 
.element-left {width:200px;} 
.indent-1 {padding:10px;} 
.indent-2 {padding:20px;} 
.element-right {width:150px;}

Una pequeña cantidad de margen de beneficio adicional, pero sí lograr el efecto deseado.

Fuente

2011-02-18 14:46:58 Spudley

tablas y definir el ancho del elemento "izquierda" no funciona para mí - ver la parte editada en mi pregunta ... – geronimo

@geronimo - ver mi actualización. :) – Spudley

Hmm, parece una idea útil. Lo intentaré si funciona para mi problema "real" (ya que no sé de antemano cuántos niveles tengo, y mi HTML se genera a partir de un XML usando XSLT). :-) – geronimo

Puede colocar absolutamente una copia del elemento dentro del cuadro de sección con visible: none, pero el posicionamiento absoluto por definición lo convierte en un elemento "flotante" que no interactúa con los elementos que están encima de él.

Asumiendo que el diseño de su página sea fijo, puede usar padding-left: #px; para lograr su objetivo, ya que no creo que el posicionamiento relativo sea lo que desea.

Como alternativa, puede utilizar display: table-* para obligarlo a mantener una forma más estricta sin afectar a la estructura del documento, como se muestra here

Sin embargo, dependiendo de si desea que las células sean fluido puede que tenga que alterar los .section divs en display: table-row si no te gusta una configuración de ancho predeterminada y quieres que las secciones separadas se alineen.

Fuente

2011-02-18 14:34:00

Esto se puede hacer de hecho fácil y simplemente con divs. Solo necesita colocar un div con posición: relativo dentro de la div en línea o en bloque. Establezca su ancho y alto al mismo que el div que contiene. A continuación, encontrará que puede colocar otro div completamente dentro de él.

Fuente

2014-05-29 15:58:52 Twmprys

CSS: display: inline-block y posicionamiento: absoluta

Respuesta

Cuestiones relacionadas