div的垂直和水平对齐(Vertical and horizontal align of divs)

请扩大的jsfiddle看到在行动中， http://jsfiddle.net/5fp37/ 。 我想蓝色边框框对齐并排，但我不想提的宽度在箱子上。 这拨弄工作正常，但只要我删除width:400px ，这两个箱子得到对方的顶部/底部。 任何线索？

不用想specifiy的任何东西宽度。 板或框。 只是盒子的最小宽度，因为疗法可能是未知的箱子数量。 并且每个将通过侧下车侧

也不想要的div位置发生变化时，页面重新大小。 垂直总是垂直对齐和水平无论父或子项/宽度的水平线始终对齐 。

垂直框中肩并肩地走和水平的人去彼此的顶部/底部。 不管（任务容器的尺寸或自己子女数的div在这种情况下，S）

这似乎是不可能的。 有没有办法？

---

---

要做到这一点：

http://leankit.com/blog/2010/12/10-kanban-boards-leankit-kanban-style/

.board{
  display:block;
  margin-right:5px;
  margin-left:5px;
  margin-top:10px;
  margin-bottom:10px;

  border: red solid thin;
  min-height:510px;

}

.box{
  margin-right:5px;
  margin-left:5px;
  margin-top:10px;
  margin-bottom:10px;
  border: blue solid thin;
  min-height:500px;
  min-width:160;
  width:400px;

}

.box-virtical{
  display:inline-block;
  float:left;

}

.box-horizontal{
  display:block;


}



.task{
  margin-right:5px;
  margin-left:5px;
  margin-top:10px;
  margin-bottom:10px;
  display:block;
  float: left;
  border: green solid thin;
  width:150px;
  height:100px;
}






     <div class="board">
  <div class="box box-virtical">
    <div class="task">
    </div>
    <div class="task">
    </div>
    <div class="task">
    </div>
    <div class="task">
    </div>
    <div class="task">
    </div>
  </div>

  <div class="box box-virtical">
    <div class="task">
    </div>
    <div class="task">
    </div>
    <div class="task">
    </div>
    <div class="task">
    </div>
    <div class="task">
    </div>
  </div>
</div>

Answer 1:

我不hink那是你尝试acheive可以使用浮动。 浮动元素的问题是，他们首先需要的，他们需要展示自己的内容，如果你不指定一个宽度。 所以，你的绿框将被首先对齐。 它比检查两个绿色框可以彼此相邻浮动。

表，表行和表单元格：你可以尝试使用显示器。 见我的小提琴，更新的变化http://jsfiddle.net/5fp37/5/

请检查浏览器的支持是不够的，你（没有Internet Explorer 7和下面）

它的好处是：它会自动伸展像每一个表，你可以使用垂直对齐：中间的这里面的垂直对齐方式。

.board {
   display: table;
    width: 100%;
}

.boardrow {
   display: table-row;
}

.box{
  display: table-cell;
}

Answer 2:

使用Flex盒。

演示

.board{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

我用这个发电机

文章来源: Vertical and horizontal align of divs