div的垂直和水平对齐

Question

请展开jsfiddle以查看操作框http://jsfiddle.net/5fp37/。 我希望蓝色边框并排排列，但我不想提到盒子的宽度。 这个小提琴工作正常，但是一旦我移除width:400px，两个盒子就会相互上下。任何线索？

不想指定任何东西的宽度。板子或盒子。只是盒子的最小宽度，因为可能是未知的盒子数量。每个人都会并排下车

当页面重新调整大小时，也不希望div改变位置。垂直方向始终垂直对齐，水平方向始终水平对齐，无论父项目或子项目/宽度如何。

垂直方框并排放置，水平方框相互上下。无论容器大小或自己孩子的数量（在这种情况下为任务div）

似乎不可能。有办法吗？

---

---

想要这样做：

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

使用flex-box。

demo

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

我使用了这个generator

Answer 2

我并不认为你尝试使用浮动可以实现的目标。浮动元素的问题在于，如果您不指定浮动元素，它们首先需要显示其内容所需的宽度。所以你的绿色盒子将首先对齐。它检查两个绿色框是否可以相互浮动。

您可能尝试使用display：table，table-row和table-cell。请参阅我的小提琴更新，了解更改http://jsfiddle.net/5fp37/5/

请检查浏览器支持是否足够（没有Internet Explorer 7及以下版本）

它的好处：它像每张桌子一样自动伸展，你可以在里面使用vertical-align：middle进行垂直对齐。

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

.boardrow {
   display: table-row;
}

.box{
  display: table-cell;
}