老师问一下。我这个section部分为什么没有被table撑开，只被aside撑开了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 取消默认样式 */
*{
margin: 0px;
padding: 0px;
}
/* 头部装饰 */
header{
width: 100%;
height:60px ;
background-color: #169bd5;
}
/* logo装饰 */
header img{
margin-top: 10px;
}
/* 左侧文字样式 */
aside{
width: 12%;
/* height: 100% */
border-top: 2px solid gray;
/* float: left; */
display: inline-block;
}
.threebox{
margin: 15px 0px 30px 15px;
}
.text{
display: block;
text-decoration: none;
color: black;
font-size: 0.8em;
line-height: 1.5em;
}
.order{
font-size: 0.8em;
line-height: 1.5em;
}
/* 表格设置 */
section{
position: relative;
}
section:after{
content: "";
width: 0px;
height: 0px;
display: block;
clear: both;
}
table{
width: 88%;
position: absolute;
top: 0;
right: 0;
text-align: center;
font-size: 0.5em;
}
td{
height: 50px;
}
/* 脚部 */
footer{
text-align: center;
width: 100%;
height: 50px;
background-color:#169bd5;
clear: both;
position: absolute;
top: 866px;
line-height: 60px;
}
</style>
</head>
<body>
<!-- 头部 -->
<header>
<!-- logo -->
<img src="img/logo.png" >
</header>
<!-- 主体部分 -->
<section>
<!-- 主体左侧 -->
<aside>
<div class="threebox">
<a href="#" class="text">商品管理</a>
<a href="#" class="text">评价管理</a>
<a href="#" class="text">咨询管理</a>
</div>
<div class="threebox">
<span class="order">全部订单</span>
<a href="#" class="text">待处理订单</a>
<a href="#" class="text">已完成订单</a>
<a href="#" class="text">今日物流</a>
</div>
<div class="threebox">
<a href="#" class="text">月考核</a>
<a href="#" class="text">季度考核</a>
<a href="#" class="text">年度考核</a>
</div>
</aside>
<!-- 右侧表格部分 -->
<table border="1px solid gray" cellspacing="0" cellpadding="" width="88%" >
<tr>
<td colspan="8" align="left">全部订单</td>
</tr>
<tr>
<td colspan="8" align="left">查询：<input type="date" name="date" id="" value="" />至<input type="date" name="" id="" value="" /></td>
</tr>
<tr>
<td colspan="2">宝贝信息</td>
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操作</td>
</tr>
<tr>
<td width="100px"><img src="img/txue.png" height="50px"></td>
<td width="400px">2019新款个性男女潮牌Imooc暮春直行运动鞋</td>
<td width="100px">2</td>
<td width="40px">120</td>
<td width="80px">小明</td>
<td width="150px">2019-2-21 21：54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/xie.jpg" height="50px"></td>
<td>2019新款个性男女潮牌Imooc暮春直行运动衫</td>
<td>2</td>
<td>120</td>
<td>小李子</td>
<td>2019-2-21 19：04</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/txue.png" height="50px"></td>
<td>2019新款个性男女潮牌Imooc暮春直行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小红</td>
<td>2019-2-21 16：54</td>
<td>240</td>
<td>待发货</td>
</tr>
<tr>
<td><img src="img/xie.jpg" height="50px"></td>
<td>2019新款个性男女潮牌Imooc暮春直行运动衫</td>
<td>2</td>
<td>120</td>
<td>可乐</td>
<td>2019-2-21 14：30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/txue.png" height="50px"></td>
<td>2019新款个性男女潮牌Imooc暮春直行运动鞋</td>
<td>2</td>
<td>120</td>
<td>魏明</td>
<td>2019-2-21 14：30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/xie.jpg" height="50px"></td>
<td>2019新款个性男女潮牌Imooc暮春直行运动衫</td>
<td>2</td>
<td>120</td>
<td>李晓雨</td>
<td>2019-2-21 14：30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/txue.png" height="50px"></td>
<td>2019新款个性男女潮牌Imooc暮春直行运动鞋</td>
<td>2</td>
<td>120</td>
<td>艳艳</td>
<td>2019-2-21 14：30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/xie.jpg" height="50px"></td>
<td>2019新款个性男女潮牌Imooc暮春直行运动衫</td>
<td>2</td>
<td>120</td>
<td>片片</td>
<td>2019-2-21 19：30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/txue.png" height="50px"></td>
<td>2019新款个性男女潮牌Imooc暮春直行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小兰</td>
<td>2019-2-21 14：30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/xie.jpg" height="50px"></td>
<td>2019新款个性男女潮牌Imooc暮春直行运动衫</td>
<td>2</td>
<td>120</td>
<td>为盈利</td>
<td>2019-2-21 14：30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/txue.png" height="50px"></td>
<td>2019新款个性男女潮牌Imooc暮春直行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小兰</td>
<td>2019-2-21 14：30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="img/xie.jpg" height="50px"></td>
<td>2019新款个性男女潮牌Imooc暮春直行运动衫</td>
<td>2</td>
<td>120</td>
<td>为盈利</td>
<td>2019-2-21 14：30</td>
<td>240</td>
<td>未发货</td>
</tr>
</table>
</section>
<!-- 脚部 -->
<footer>
2019-9-21 @imooc.com
</footer>
</body>
</html>
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星