Comment puis-je bas aligner plusieurs inline-block divs dans un récipient sans perdre leur flux?

C'est très simple graphique à barres sur lequel je travaille,

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

Si j'ai mis le conteneur parent et l'intérieur divs absolu & bottom:0, puis ils ont tous se chevauchent. Ils coulent bien sans le positionnement absolu mais alors la barre est à l'envers.

Remarque: Mon intention était de conserver la ligne de flux de de la bars et ne pas avoir à spécifier de manière explicite les positions horizontales.

Ici est un meilleur exemple de ce problème.

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

Comment puis-je bas aligner plusieurs inline-block divs dans un récipient sans perdre leur flux?

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;}

Donc, il y a une meilleure façon de le faire, comme avec le webkit flexbox ou quelque chose?

Essayez de donner à leur positionnement relatif.
la terminologie relative vs absolue est confus pour moi dans le css. J'ai essayé les deux façons juste pour être sûr. Il est encore à l'envers.
Pouvez-vous montrer un exemple de ce à quoi vous vous battez vs ce que vous voulez?
Je suis un peu confus par ce que vous avez actuellement et ce que vous essayez d'obtenir. Sont les éléments div, les barres du graphique? Pourriez-vous développer un peu s'il vous plaît? Cela semble aligné pour moi...jsfiddle.net/ZjMp5
stackoverflow.com/questions/6116423/...

OriginalL'auteur Benjamin | 2012-06-17

css css-position html position vertical-alignment

2

Fonctionne pour moi lors de la position absolue:
```
<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>
```
Violon ici.

J'aurais pu faire cela, mais j'essayais de garder l'écoulement afin d'éviter l'utilisation left:_px. Je me demande si vous avez besoin d'utiliser des tables ou flexbox pour cela. - Je rester loin de pixels à chaque fois que possible.
En fait, cela semble être la façon dont stackoverflow le représentant de la barre graphique de l'utilisateur vue de profil.
Je suis d'accord avec votre philosophie, mais vous pouvez littéralement passer des semaines à essayer de faire de sh*t, comme dans un "meilleures pratiques" en quelque sorte bien, surtout quand vos graphiques de commencer à obtenir plus compliqué ou vous commencer à ajouter plus de fonctionnalités. N'oubliez pas que les éléments du DOM ne sont pas vraiment conçus pour les "charts" ou "graphiques"...ce qui signifie que vous pouvez vous permettre de couleur en dehors des lignes un peu quand il s'agit de les utiliser pour des choses créatives au-delà de la sémantique de mise en page.
De Plus, et c'est peut-être juste moi, j'ai trouvé que le positionnement Absolu avec :px est généralement le moyen le plus rapide pour atteindre la croix-navigateur compatible résultats dans un mal de tête-mode gratuit (en dehors de l'aide .js cartographie libs). Le maintien de la cartographie des applications conçues avec de la position absolue est aussi plus facile en raison de l'intuition de l'x/y du système de coordonnées que le positionnement absolu est basé sur. Je suis sûr que vous trouverez un million de gens qui crient "c'est faux! son pas de sémantique!". Pour eux, je dirais que cela fonctionne, il obtient des résultats, et je suis en mesure de passer à la prochaine tâche d'un projet plus rapidement.
J'apprécie les conseils. Je n'ai jamais entendu dire que les cartes étaient à l'extérieur de la portée des éléments du DOM. Qui laisserait seulement l'image des cartes ou des plugins de visualisation interactive des données? Semble comme un malheureux conception. Je suis d'accord que parfois, le point de vue philosophique, de méthode parfaite peut être une perte de temps. Mais je préfère que vous connaissez la bonne façon de faire quelque chose et ensuite avoir la possibilité de prendre un délibérée raccourci au lieu de le faire juste pour un manque de connaissance de toute autre manière.

OriginalL'auteur Daniel Szabo

1

c'est de travailler sur mon navigateur (Chrome 19)

Comment puis-je bas aligner plusieurs inline-block divs dans un récipient sans perdre leur flux?

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/

Cela ne fonctionne pas sous IE (9). Mais je pense que IE 10.
Notez que cette option utilise une ancienne version de la flexbox syntaxe: css-tricks.com/old-flexbox-and-new-flexbox

OriginalL'auteur Benjamin

1

Ici est une autre approche. Il faut un adaptateur supplémentaire autour de chaque barre. L'idée est de faire plusieurs colonnes .bar-container qui s'étendent sur la largeur correcte de la bars et la totalité de la hauteur de la #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>

Qui est créatif. Il est à mi-chemin, comme un tableau.

OriginalL'auteur Jrod

Vous devez vous connecter pour publier un commentaire.