div的垂直和水平对齐 - 第2部分
参考Vertical and horizontal align of divs
和这段新代码http://jsfiddle.net/8B29k/2/
为什么“底部的盒子”没有覆盖整个宽度？
我不想让我们使用html colspan（在这种情况下不能这样，因为盒子会动态生成，我可能自己也不会知道有多少盒子是上下两个方向）
除了它之外或之上/之下，每个盒子都独立于盒子。那就是表格的情况。如果在每个TR中存在3个TR和3个TD，则不能使中间TR仅具有一个TD并且将其宽度扩展为等于其他TR（所有TD组合）。不能在没有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>
1 个答案:
答案 0 :(得分：0)
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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？