2

大家好，我有一个问题，为什么我的网站的整个页面在我插入图像时会略微向左移动（10 - 30 像素左右），而当我删除它时又恢复正常。任何帮助都将不胜感激。

html代码-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
    <head>
    <meta name="description" content="Random Text">
    <meta name="keywords" content="Random words">
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">

    <title>X</title>
    <link href="menusheet.css" rel="stylesheet" type="text/css">
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="header">
    <div id="logo"><img src="images/bar.png" alt="knives"/></div>
</div>
    <div id="wrapper">  
        <!-- Black Menu -->
        <div id="menu_wrapper" class="black">
        <div class="left"></div>
            <ul id="menu">
        </div>
    </div>  

<div id="content">
<div id="container">
    <div id="adsense">

    </div>

    <div id="stepsbox">
    </div>
</div>

<h4>Factory edges</h4><img src="images/factoryangle.png" alt="Factory angles" style="float:left; margin-right: 20px; width: 175px; height: 175px;"/>
    </div>
            <div id="footer">
        <div id="footerleft">
        <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="sitemap.html">Site Map</a></li>
    </ul>
    </div>
    <div id="footercenter">
        &copy; 2013 x.com
    </div>
</div>


CSS - 

body {
width: 960px;
margin: 0 auto;
font-family: Arial, Verdana, sans-serif;
color: black;
background-image: url(images/bg.jpg) ;
background-repeat: no-repeat;   
background-size: cover;
}   


#wrapper {
width: 960px;
margin: 0 auto;
}

#content {
width: 920px;
height: 100%;
overflow: hidden;
background-color: white;
padding: 0px 20px 0px 20px;
margin: 0px 0px 0px 0px;
}

#container {
width: 300px;
height: 550px;
float: right;
background-color: black;
margin-left: 10px;
}

#adsense {
width: 300px;
height: 250px;
float: right;
background-color: yellow;
}

#stepsbox {
float:right;
width: 250px;
height: 220px;
padding: 15px 15px 15px 15px;
background-color: #E0E0E0;
margin: 10px 0px 5px 10px;
}

#header {
height: 70px;
background: white;
width: 960px;
margin: 0 auto;
}   

#footer { 
height: 60px;
font-size: 80%; 
padding: 5px 5px 5px 5px;
background-color: #333333;
color: white;
}

#footerleft {
width: 300px;
height: 50px;
float: left;
}

#footercenter {
width: 620px;
height: 40px;
float: right;
text-align: right;
padding: 5px 5px;
border-style:solid;
border-width:5px;
}
4

2 回答 2

0

看不到您的图像...：D，但是在您的位置，我将这段代码插入到 css 中

img{
margin: 0px;
padding: 0px;
border: 0px;
}

这将删除图像标签周围的所有空格...尝试并期待...它，如果您插入图像链接会很高兴... :) 很容易理解

于 2013-03-14T06:41:51.240 回答
0

谈论哪个图像“标志”或

<h4>Factory edges</h4><img src="images/factoryangle.png" alt="Factory angles" style="float:left; margin-right: 20px; width: 175px; height: 175px;"/>

如果工厂边缘是图像，则在之后添加
一个

<h4>Factory edges</h4><br />
<img src="images/factoryangle.png" alt="Factory angles"style="float:left; margin:0 20px 0 0; width:175px; height:175px;" />

还要在样式中添加这个

#content{margin:0 auto; }

与内容中的其他属性

我认为这会做，如果不是请详细解释.. :)

于 2013-03-14T07:04:56.633 回答