div-part2的垂直和水平对齐 [英] vertical and horizontal align of div - part2
本文介绍了div-part2的垂直和水平对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
关于 div的垂直和水平对齐
和此新代码 http://jsfiddle.net/8B29k/ 2 /
为什么底部的方框不能覆盖整个宽度？
我不想让我们的html colspan（在这种情况下不能动态生成框，我可能不知道一个框的上下有多少）
I do not want to us html colspan (cannot in this scenarios because boxes will be generated dynamically and I may self wont know how many are upside and downside of one box)
每个盒子独立于盒子或其上方/下方的盒子。现在是表的情况。如果在每个TR中有3个TR和3个TD，则不能使中间TR只有一个TD，并且扩展其宽度等于其他TR（所有TD组合）。不能做，没有colspan在html。但在这种情况下。我的自我不知道周围的TD。那么它的解决方案是什么呢？
each box s independant of the boxes besides it or above/below it. thats now the case with tables. if there are 3 TR and 3 TD in each TR , i cannot make the middle TR have just one TD and expand its width as equal to the other TRs (all TDs combined) . cant do that without colspan in html. but in this scenario. I my self wont know the surrounding TDs. so what is the solution for it?
这是我想要创建的布局：
This is the layout that I am trying to create:
img src =https://i.stack.imgur.com/Mtfyc.pngalt =enter image description here>
.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>
推荐答案
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>
这篇关于div-part2的垂直和水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
