想如下图进行布局，想把第二列中拆分成三行，第一行在顶端，第三行在最下端
布局如下：
HTML 代码如下：
<!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<link rel = "stylesheet" href = "index.css">
<title> index </title>
</head>
<body>
<div id = "wholePage">
<div id = "pageRow">
<div id = "siderbar">
<img src = "chinese.gif" alt = "中国国旗">
<img src = "usa.gif" alt = "美国国旗"><br>
<p> Links</p><br>
<a href = "index.jsp">Home</a><br>
<a href = "product">Product</a><br>
<a href = " ">Hot Links1</a><br>
<a href = " ">Hot Links2</a><br>
<a href = " ">Hot Links3</a><br>
</div>
<div id = "content">
<div id = "header">
<p > Welcome to ABC Inc. </p> <br>
<hr>
</div>
<div id = "indexContent">
<p > Page-specific content goes here</p>
</div>
<div id = "footer">
<hr>
<p > Thanks for stopping by!</p>
</div>
</div>
</div>
</div>
</body>
</html>CSS代吗如下：
p
{
font-size: 10px;
}
div#wholePage
{
display:table;
}
div#pageRow
{
display:table-row;
}
div#sidebar
{
display:table-cell;
}
div#content
{
display:table-cell;
vertical-align:bottom;
}
content#header
{
display:table-row;
vertical-align:top;
}
content#indexContent
{
display:table-row;
vertical-align:middle;
}
content#footer
{
display:table-row;
vertical-align:bottom;
}
楼主可了解一下flex布局。我也是初学者，就不回答了。