用css3，html水平布局的时候，我分左，中，右三个div，单单有左边div的时候是正常显示的（见图1）

但是加上中间的那层的时候，就变成如下图我的原意就是想分成三列水平显示。不知道为什么第一列上面会空出来？代码大概如下body,html{margin:0px;padding... 但是加上中间的那层的时候，就变成如下图

我的原意就是想分成三列水平显示。不知道为什么第一列上面会空出来？
代码大概如下

body,html
{margin:0px;
padding:0px;
}
.container{
width:960px;
margin:0 auto 0 auto;
height:300px;
}

.leftbar{
float:left;
width:178px;
border:2px solid #999999;
color:black;
height:280px;
}
.leftbar h3{
background-color:#999;
text-align:left;
font-size:16px;
margin:0px;
padding:0px;
}

.t1 td{
margin-top:0px;
font-size:16px;
text-align:left;
width:150px;
display:block;
line-height:20px;
text-decoration:none;
color:black;
border-top:1px dotted #999999;
}

.middle{
margin-left:182px;
width:538px;
float:left;
height:200px;
font-size:14px;
border:1px solid #999999;
}
.middle h3{
background-color:#F00;
width:80px;
}

</style>
</head>

<body>

<div class="container">

<div class="leftbar">

<h3><strong>月票pk榜</strong></h3>
<table class="t1">
<tr>
<td class="pp"><a href="#">我的老婆是军阀</a></td><td align="right">719</td>
</tr>

<tr>
<td><a href="#">仙绝</a></td><td align="right">329</td>
</tr>

<tr>
<td><a href="#">大魔神</a></td><td align="right">342</td>
</tr>

<tr>
<td><a href="#">最强掌门</a></td><td align="right">334</td>
</tr>

<tr>
<td><a href="#">术士的幸福生活</a></td><td align="right">565</td>
</tr>

</div>

<div class="middle">
<h3>图书专题</h3>
<p class="head2">离婚妈妈的快乐情缘如果不能好好爱</p>
<p class="content">故事的主角叫许可。30岁，失业，离婚，还带个孩子....<a href="">[更多内容]</a></p>

<p class="head2">著名作家陈丹燕的心灵旅程我要有过大海</p>
<p class="content">阿里巴巴旗下的淘宝认为微信出台了一些针对淘宝商品和淘宝卖家在微信进行.....<a href="">[更多内容]</a></p>
</div> 展开





 我来答

1个回答

#热议# 普通体检能查出癌症吗？

网海1书生

科技发烧友

2015-06-17 · 擅长软件设计、WEB应用开发、小程序

网海1书生

采纳数：12311 获赞数：26232

向TA提问私信TA

关注

展开全部

这是因为你的那个<table>缺少了</table>，导致后面的内容被包括进<table>里了

本回答由提问者推荐

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

用css3，html水平布局的时候，我分左，中，右三个div，单单有左边div的时候是正常显示的（见图1）

为你推荐：