问题
In reference to Vertical and horizontal align of divs
and this new code http://jsfiddle.net/8B29k/2/
Why the "box at bottom" not covering the full width?
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)
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:
.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;
}
The HTML looks like:
<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:
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>
来源：https://stackoverflow.com/questions/17902138/vertical-and-horizontal-align-of-div-part2