css - div の垂直方向および水平方向の配置

Question

jsfiddle を展開して、動作中のボックスを確認してください ( http://jsfiddle.net/5fp37/ ) 。青い境界ボックスを並べて配置したいのですが、ボックスの幅については言及したくありません。このフィドルは正常に機能しますが、を削除するとすぐにwidth:400px、両方のボックスが互いに上下に重なります。どんな手掛かり？

幅を指定したくありません。ボードまたはボックス。不明な数のボックスがある可能性があるため、ボックスの最小幅だけです。そしてそれぞれが並んで降りる

また、ページのサイズが変更されたときに div の位置を変更したくありません。親または子アイテム/幅に関係なく、 垂直は常に垂直に整列し、水平は常に水平に整列します。

縦のボックスは横に並べ、横のボックスは上下に並べます。コンテナーのサイズや自身の子 (divこの場合は task ) の数に関係なく

無理そうです。方法はありますか？

---

---

これをしたかった：

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

float を使用して達成しようとしていることが可能であるとは思いません。フローティング要素の問題は、指定しない場合、最初にコンテンツを表示するために必要な幅を取ることです。したがって、緑色のボックスが最初に整列されます。次に、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;
}