div的垂直和水平对齐

Question

请展开 jsfiddle 以查看运行中的框，http://jsfiddle.net/5fp37/。 我希望蓝色边框并排对齐，但我不想提及框的宽度。 这个小提琴工作正常，但一旦我删除width:400px，两个盒子就会相互重叠。有什么线索吗？

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

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

垂直的盒子并排放置，水平的盒子相互顶部/底部。无论容器大小或它们自己的孩子的数量（在本例中为任务divs）

这似乎是不可能的。有什么办法吗？

---

---

想要这样做：

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

使用弹性盒子。

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

我不认为您尝试使用浮点数来实现。浮动元素的问题在于，如果您不指定，它们首先会采用显示其内容所需的宽度。因此，您的绿色框将首先对齐。然后它会检查两个绿色框是否可以彼此相邻浮动。

您可能会尝试使用显示：表格、表格行和表格单元格。请参阅我的小提琴更新以了解更改http://jsfiddle.net/5fp37/5/

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

它的好处：它像每个表格一样自动拉伸，您可以在其中使用 vertical-align: middle 进行垂直对齐。

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

.boardrow {
   display: table-row;
}

.box{
  display: table-cell;
}