网页右侧有空白,我就想设置成1440px宽度的。请问该怎么更改?

图片说明

如上图所示:网页右侧区域会有空白,该怎么更改代码?    
源代码如下:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="style/reset.css" />
</head>

<body>
    <div>
        <div class="context1-top">
          <table bgcolor="#FBFBFB">
              <tr width="1440">
                <td><img src="image/logo.png" width="897" height="61" /></td>
                <td width="90px" align="center" valign="bottom" ><a href="#">系统登录</a></td>
                <td valign="bottom" width="90px" align="center" ><a href="#">新闻中心</a></td>
                <td valign="bottom" width="90px" align="center" ><a href="#">通知公告</a></td>
                <td bgcolor="#FBFBFB" width="273">&nbsp;</td>
              </tr>
            </table>

      </div>

        <div>
        <img src="image/background image.png" width="1440" height="199" /> 
        </div>
    </div>

    <div class="context2">
        <div class="context2-center">
          <div class="context2-center-top">
                <table><tr >
                    <td width="90px" height="40px" align="center" valign="middle"><font size="2">新闻中心</font></td>
                </tr></table>
          </div>
          <div class="context2-center-top2">
                <table>
                    <tr >
                        <td width="30"></td>
                      <td width="" height="40px" align="left" valign="middle" v>提升工会干部素质心</td>
                    </tr>
                </table>
          </div>
          <div>
            <img src="image/line.png" width="1000" height="13" /> 
          </div>
          <div class="context2-table">
            <table width="1000" height="25" align="center"  >
                <tr >
                    <td width="320"></td>
                    <td><font size="2">发布时间:</font></td>
                    <td><font size="2">2017-06-03</font></td>
                    <td><font size="2">|</font></td>
                    <td><font size="2">作者:</font></td>
                    <td><font size="2">gg</font></td>
                    <td><font size="2">|</font></td>
                    <td><font size="2">阅读:</font></td>
                    <td><font size="2">318次</font></td>
                    <td width="320"></td>
                </tr>
            </table>
          </div>
          <div class="context2-context"> </div>

           <div class="context2-context2">
                <table>
                    <tr height="15"></tr>
                    <tr>
                      <td width="35"></td>
                        <th><font size="2" color="#838383">上一篇:</font></th>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td width="35"></td>
                        <td><font size="2" color="#838383">下一篇:</font></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr></tr>
                </table>    
           </div>
          <div class="context2-bottom"></div>  

      </div>
    </div>
    <div>
       <div class="context3">
            <table height="65">
                <tr height="40"></tr>
                <tr height="25">
                    <td width="580"></td>
                    <td align="center"><font size="2">系统登录</font></td>
                    <td align="center" width="40"> <font size="2" >|</font></td>
                    <td align="center"><font size="2">新闻中心</font></td>
                    <td align="center" width="40"><font size="2">|</font></td>
                    <td align="center"><font size="2">通知公告</font></td>
                    <td  align="center" width="580"></td>
                </tr>
            </table>
       </div>
      <div><img src="image/foot.png" width="1440" height="106" /></div>
   </div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

body,ul,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,iput{
margin: 0;
padding: 0;
text-align: center;
}

.context1-top{width:1440px;}
.context2-center{ width:1000px; background-color:; margin-left: auto; margin-right: auto;}
.context2-center-top{ height:40px; background-color:#EAEAEA; vertical-align:central;}
.context2-center-top2{height:50px; background-color:#FFFFFF}
.context2{background-color:#F9F9F9; width:1440px;}
.context2-table{background-color:#FFFFFF}
.context2-context{background-color:#FFFFFF; width:1000px; height:300px;}
.context2-context2{ margin-top:15px; height:70px; width:1000px;background-color:#FFFFFF; }
.context3{ height:65px;background-color:#E9E9E9; width:1440px;}
.context2-bottom{ width:1440px; height:25px; background-color:#F9F9F9;}







4个回答

图片说明

看上图哦,你这个地方设置了宽度.context2-bottom{width:1440px},但是这个context2-bottom是在context2-center里面的,你给context2-center设置了居中和width:1000px,很显然这样的话context2-bottom这个盒子就突破天际,顶出来...

两种方法哦,你把context2-bottom里面width的属性去掉,或者简单粗暴的在context2-center里面加一个overflow:hidden的属性就OK啦

body下的所有东西放进一个div里,设置align ="center" 这样就会居中,两边还是对称的,会比这样一边空白好。
如果非要全部占满,那就去设置里面div的width属性。

wang_wie
wang_wie 回复x_mario: 已经解决了 因为context2-bottom宽度的问题
3 年多之前 回复
x_mario
x_mario 刚看到你已经设置为1440px了,貌似你的显示器的宽度比较高,所以你的1440px并不能全屏
3 年多之前 回复

666一心只看上面的div了,,,没注意到下面这一块。。。。眼真尖

@himushroom

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐