css - div 的垂直和水平对齐 - 第 2 部分

Question

参考div 的垂直和水平对齐

这个新代码http://jsfiddle.net/8B29k/2/

为什么“底部框”没有覆盖整个宽度？

我不想让我们使用 html colspan（不能在这种情况下，因为盒子会动态生成，我可能自己不知道一个盒子有多少上下）

每个盒子都独立于它旁边或上面/下面的盒子。这就是现在桌子的情况。如果每个 TR 中有 3 个 TR 和 3 个 TD，我不能让中间的 TR 只有一个 TD 并将其宽度扩展为等于其他 TR（所有 TD 组合）。如果没有 html 中的 colspan，就无法做到这一点。但在这种情况下。我自己不知道周围的 TD。那么解决方案是什么？

这是我要创建的布局：

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

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

}


.board-title{
  background-color:black;
  color:white;
  font-size:50px;
}

.board-body{

}

.box{

  vertical-align:top;
  margin-right:5px;
  margin-left:5px;
  margin-top:10px;
  margin-bottom:10px;
  border: blue solid thin;
  /**min-height:500px;**/
  min-width:160px;
  height:100%;



}

.box-title{

  width:100%;
  background-color:grey;
  font-size:50px;
}

.box-body{
  display:table-row;
}

.box-parent{


}

.box-vertical{
  display:table-cell;
  vertical-align:top:


    vertical-align:top;
  margin-right:5px;
  margin-left:5px;
  margin-top:10px;
  margin-bottom:10px;
  border: blue solid thin;
  /**min-height:500px;**/
  min-width:160px;
  height:100%;
}

.box-horizontal{
  display:table-row;

    vertical-align:top;
  margin-right:5px;
  margin-left:5px;
  margin-top:10px;
  margin-bottom:10px;
  border: blue solid thin;
  /**min-height:500px;**/
  min-width:160px;
  height:100%;
}



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

HTML 看起来像：

<div class="board">
    <div class="board-title">board title- 
    </div>
    <div class="board-body">

        <div class="box-vertical">
            <div class="box-title">box1 title- 
            </div>
            <div class="box-body">
                <div class="box-vertical">
                      <div class="box-title">inner box title
                      </div>
                      <div class="box-body">
                          <div class="task">
                          </div>
                          <div class="task">
                          </div>
                          <div class="task">
                          </div>
                          <div class="task">
                          </div>
                          <div class="task">
                          </div>
                          <div class="task">
                          </div>
                          <div class="task">
                          </div>
                          <div class="task">
                          </div>
                          <div class="task">
                          </div>
                          <div class="task">
                          </div>
                          <div class="task">
                          </div>
                          <div class="task">
                          </div>
                      </div>   
                </div>
            </div>



        </div>






        <div class="box-vertical">
              <div class="box-title">box at side title- 
              </div>
              <div class="box-body">
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
              </div>   
        </div>





        <div class="box-horizontal">
              <div class="box-title">box at bottom - title
              </div>
              <div class="box-body">
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
                  <div class="task">
                  </div>
              </div>   
        </div>
















    </div>

</div>

Answer 1

http://jsfiddle.net/7brCZ/7/ http://jsfiddle.net/7brCZ/7/embedded/result/

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

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

}


.board-title{
  background-color:black;
  color:white;
  font-size:50px;
}

.board-body{

}

.box{

  vertical-align:top;
  margin-right:5px;
  margin-left:5px;
  margin-top:10px;
  margin-bottom:10px;
  border: blue solid thin;
  /**min-height:500px;**/
  min-width:160px;
  height:100%;



}

.box-title{

  width:100%;
  background-color:grey;
  font-size:50px;
}

.box-body{
  display:table;
}

.box-parent{


}

.box-vertical{
  display:table-cell;
  vertical-align:top:


    vertical-align:top;
  margin-right:5px;
  margin-left:5px;
  margin-top:10px;
  margin-bottom:10px;
  border: blue solid thin;
  /**min-height:500px;**/
  min-width:160px;
  height:100%;
}

.box-horizontal{


    vertical-align:top;
  margin-right:5px;
  margin-left:5px;
  margin-top:10px;
  margin-bottom:10px;
  border: blue solid thin;
  /**min-height:500px;**/
  min-width:160px;
  height:100%;
}



.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="board-title">board
        </div>
        <div class="board-body">






            <div class="box-vertical">
                  <div class="box-title">box at virtical
                  </div>
                  <div class="box-body">
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                  </div>   
            </div>



            <div class="box-vertical">
                  <div class="box-title">box at virtical
                  </div>
                  <div class="box-body">
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                  </div>   
            </div>









            <div class="box-vertical">
                <div class="box-title">box virtical
                </div>
                <div class="box-body">
                    <div class="box-vertical">
                          <div class="box-title">inner virtical box
                          </div>
                          <div class="box-body">
                              <div class="task">
                              </div>
                              <div class="task">
                              </div>
                              <div class="task">
                              </div>
                              <div class="task">
                              </div>
                              <div class="task">
                              </div>
                              <div class="task">
                              </div>
                              <div class="task">
                              </div>
                              <div class="task">
                              </div>
                              <div class="task">
                              </div>
                              <div class="task">
                              </div>
                              <div class="task">
                              </div>
                              <div class="task">
                              </div>
                          </div>   
                    </div>
                    <div class="box-vertical">
                          <div class="box-title">inner virtical box
                          </div>
                          <div class="box-body">





                            <div class="box-vertical">
                                  <div class="box-title">inner virtical box
                                  </div>
                                  <div class="box-body">
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                  </div>   
                            </div>
                            <div class="box-vertical">
                                  <div class="box-title">inner virtical box
                                  </div>
                                  <div class="box-body">
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                      <div class="task">
                                      </div>
                                  </div>   
                            </div>






                          </div>   
                    </div>
                </div>



            </div>






            <div class="box-vertical">
                  <div class="box-title">box at side
                  </div>
                  <div class="box-body">
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                  </div>   
            </div>





            <div class="box-horizontal">
                  <div class="box-title">box at horizontal
                  </div>
                  <div class="box-body">
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                  </div>   
            </div>



            <div class="box-horizontal">
                  <div class="box-title">box at horizontal
                  </div>
                  <div class="box-body">
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                      <div class="task">
                      </div>
                  </div>   
            </div>


            <div class="box-horizontal">
                  <div class="box-title">box at horizontal
                  </div>
                  <div class="box-body">



                      <div class="box-vertical">
                        <div class="box-title">inner virtical box
                        </div>
                        <div class="box-body">
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                        </div>   
                      </div>
                      <div class="box-vertical">
                        <div class="box-title">inner virtical box
                        </div>
                        <div class="box-body">
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                        </div>   
                      </div>

                      <div class="box-vertical">
                        <div class="box-title">inner virtical box
                        </div>
                        <div class="box-body">
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                            <div class="task">
                            </div>
                        </div>   
                      </div>





                  </div>   
            </div>





        </div>

    </div>