¿Cómo puedo alinear la parte inferior de múltiples divisiones de bloque en línea en un contenedor sin perder su flujo?

Esto es para un gráfico muy simple bar Estoy trabajando en,¿Cómo puedo alinear la parte inferior de múltiples divisiones de bloque en línea en un contenedor sin perder su flujo?

<div id="container"> 
    <div style="display:inline-block;"> 
    </div> 
    <div style="display:inline-block;"> 
    </div> 
    <div style="display:inline-block;"> 
    </div> 
</div>

Si fijo el recipiente a relativa y los divs interior para absoluta & parte inferior: 0, entonces todos solapamiento. Fluyen muy bien sin el posicionamiento absoluto, pero luego el gráfico de barras está boca abajo.

Nota: Mi intención era mantener el flujo en línea de las barras y no tener que especificar explícitamente las posiciones horizontales.

Aquí hay un mejor ejemplo del problema.

http://jsfiddle.net/benstenson/NvvV6/1/

1) correct orientation but vertical alignment is top 
<div id="no-content" class="container"> 
    <div class="a"></div> 
    <div class="b"></div> 
    <div class="c"></div> 
</div> 

2) wrong orientation, vertical alignment top 
<div id="has-content" class="container"> 
    <div class="a">a</div> 
    <div class="b">b</div> 
    <div class="c">c</div> 
</div> 

3) mixed orientation, alignment is crazy 
<div id="mixed" class="container"> 
    <div class="a">a</div> 
    <div class="b">b</div> 
    <div class="c"></div> 
</div> 

4) correct orientation and correct alignment but<br/> 
flow has been lost and horizontal position must be explicit 
<div id="absolute" class="container"> 
    <div class="a">a</div> 
    <div class="b">b</div> 
    <div class="c"></div> 
</div> 

5) here we go! 
<table class="container"> 
    <tr> 
     <td><div class="a">a</div></td> 
     <td><div class="b">b</div></td> 
     <td><div class="c"></div></td> 
    </tr> 
</table>

css

body {padding:1em;font-family:sans-serif;font-size:small;} 
.container { 
    height:2.5em;width:50%;margin-bottom:1em; 
    background-color:lightgray; 
    font-size:larger; 
    font-weight:bold; 
    text-transform:Uppercase; 
} 
div.container > div { 
    width:32%; 
    display:inline-block; 
    background-color:black; 
    color:cyan; 
} 

#absolute { position:relative;} 
#absolute > div {position:absolute;bottom:0px;opacity:.3;} 

.a {height:50%;} 
.b {height:60%} 
.c {height:80%;} 

td{width:33.333%;vertical-align:bottom;} 
td > div{background-color:black;color:cyan;}

Entonces, ¿hay una mejor manera de hacer esto, al igual que con el FlexBox webkit o algo?

Fuente

2012-06-17 Benjamin

Intente darles un posicionamiento relativo. – Jrod

@Jrod la terminología relativa vs absoluta me resulta confusa en css. Lo intenté en ambos sentidos solo para estar seguro. Todavía está boca abajo. – Benjamin

¿Puedes mostrar un ejemplo de lo que estás luchando frente a lo que quieres? – jcolebrand

esto está funcionando en mi navegador (Chrome 19)

enter image description here

html

<div id="container"> 
    <div id="a">a</div> 
    <div id="b">b</div> 
    <div id="c">c</div> 
</div>

css

#container { 
    height:10em; 
    width:90%; 
    border:1px solid black; 

    display:-moz-box; /* Firefox */ 
    display:-webkit-box; /* Safari and Chrome */ 
    display:box; 

    -webkit-box-align:end; 
} 

#container > div { 
    width:34%; 
    border:1px solid red; 

    -moz-box-flex:1.0; /* Firefox */ 
    -webkit-box-flex:1.0; /* Safari and Chrome */ 
    box-flex:1.0; 
} 

#a {height:20%} 
#b {height:50%} 
#b {height:70%}

http://jsfiddle.net/benstenson/m6vR7/

Fuente

2012-06-19 01:15:18 Benjamin

Esto no funciona en IE todavía (9). Pero creo que IE 10 lo tendrá. – Benjamin

Tenga en cuenta que esto utiliza una versión anterior de la sintaxis de flexbox: http://css-tricks.com/old-flexbox-and-new-flexbox/ –

Obras para mí cuando posición absoluta:

<style type='text/css'> 
#container{ 
position :relative; 
border :1px solid #000; 
height :60px; 
width  :100px; 
} 
.b{ 
    position:absolute; 
    width :20px; 
    bottom :0 
    } 
.b1{background:blue ;height:10px; left:0px} 
.b2{background:red ;height:30px; left:30px;} 
.b3{background:yellow;height:50px; left:60px} 
</style> 

<div id="container"> 
    <div class='b b1'></div> 
    <div class='b b2'></div> 
    <div class='b b3'></div> 
</div>

Fiddle here.

Fuente

2012-06-17 04:07:19

Pude haber hecho esto, pero estaba tratando de mantener el flujo para evitar el uso de 'left: _px'. Me pregunto si necesitas usar tablas o flexbox para esto. Me mantengo lejos de los píxeles siempre que sea posible. – Benjamin

En realidad, parece ser así como stackoverflow hace el gráfico de barra de repetición en la vista de perfil de usuario. – Benjamin

@Benjamin: Estoy de acuerdo con su filosofía, pero literalmente puede pasar semanas tratando de hacer esto de una manera "óptima", especialmente cuando los gráficos se vuelven más complicados o comienza a agregar más caracteristicas. No olvides que los elementos DOM no son realmente para "gráficos" o "gráficos" ... lo que significa que puedes permitirte el color fuera de las líneas un poco cuando se trata de usarlos para cosas creativas más allá del diseño semántico de la página. –

Aquí es otro enfoque. Toma una envoltura adicional alrededor de cada barra. La idea es hacer varias columnas .bar-container que abarquen el ancho correcto de las barras y la altura completa de #graph.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Testing</title> 
     <style type="text/css"> 
      .bar-container{ 
       float:left; 
       height:100%; 
       margin-right:10px; 
       position:relative; 
       width:30%; 
      } 
      .bar { 
       border:1px solid black; 
       bottom:0; 
       position:absolute; 
       width:98%; 
      } 

      .bar-1 { 
       height:50px; 
      } 

      .bar-2 { 
       height:100px; 
      } 

      .bar-3 { 
       height:75px; 
      } 

      #graph { 
       height:500px; 
       margin:20px auto; 
       position:relative; 
       width:500px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="graph"> 
      <div class="bar-container"> 
       <div class="bar bar-1"> 
       </div> 
      </div> 
      <div class="bar-container"> 
       <div class="bar bar-2"> 
       </div> 
      </div> 
      <div class="bar-container"> 
       <div class="bar bar-3"> 
       </div> 
      </div> 
     </div>  
    </body> 
</html>

Fuente

2012-06-19 02:11:12 Jrod

Eso es creativo. Está a mitad de camino como una mesa. – Benjamin

¿Cómo puedo alinear la parte inferior de múltiples divisiones de bloque en línea en un contenedor sin perder su flujo?

Respuesta

Cuestiones relacionadas