Как я могу выровнять несколько отдельных блоков в одном контейнере без потери потока?

Это для очень простой гистограмме я работаю,Как я могу выровнять несколько отдельных блоков в одном контейнере без потери потока?

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

Если установить контейнер на относительное и внутренние дивы к абсолютному & внизу: 0, то все они перекрываются. Они отлично перемещаются без абсолютного позиционирования, но затем гистограмма перевернута.

Примечание: Мое намерение состояло в том, чтобы сохранить встроенный поток стержней и не нужно явно указывать горизонтальные положения.

Вот лучший пример проблемы.

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

Так есть лучший способ сделать это, как с WebKit Flexbox или что-то?

источник

2012-06-17 Benjamin

Попробуйте дать им относительное позиционирование. – Jrod

@Jrod терминология относительного vs абсолюта меня сбивает с толку в css. Я попробовал это в обоих направлениях, чтобы быть уверенным. Он все еще с ног на голову. – Benjamin

Можете ли вы показать пример того, чем вы сражаетесь, чем хотите? – jcolebrand

это работает на моем браузере (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/

источник

2012-06-19 01:15:18 Benjamin

Это еще не работает в IE (9). Но я думаю, что IE 10 получит его. – Benjamin

Обратите внимание, что это использует более старую версию синтаксиса flexbox: http://css-tricks.com/old-flexbox-and-new-flexbox/ –

Работы для меня, когда абсолютно позиционированные:

<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.

источник

2012-06-17 04:07:19

Я мог бы сделать это, но я пытался сохранить поток, чтобы избежать использования 'left: _px'. Интересно, вам нужно использовать для этого таблицы или flexbox. Я по-прежнему остаюсь вдали от пикселей. – Benjamin

На самом деле это похоже на то, как stackoverflow выполняет отображение столбцов в виде профиля пользователя. – Benjamin

@Benjamin: Я согласен с вашей философией, но вы можете буквально потратить несколько недель, пытаясь сделать это в стиле «лучшей практики», особенно когда ваши графики начинают усложняться или вы начинаете добавлять больше функции. Не забывайте, что элементы DOM на самом деле не предназначены для «диаграмм» или «графиков» ... это означает, что вы можете позволить себе цвет за пределами строк немного, когда дело доходит до их использования для творческих вещей за пределами семантического макета страницы. –

Вот другой подход. Для каждого бара требуется дополнительная обертка. Идея состоит в том, чтобы сделать несколько столбцов .bar-container, которые охватывают правильную ширину баров и всю высоту #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>

источник

2012-06-19 02:11:12 Jrod

Это креатив. Это на полпути, как стол. – Benjamin

Как я могу выровнять несколько отдельных блоков в одном контейнере без потери потока?

ответ

Смежные вопросы