Question

大家好我有一个问题就是为什么我插入图片时我的网页整个页面略微向左移动（10 - 30 px左右），当我删除它时恢复正常。任何帮助都表示赞赏。

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;
}

Answer 1

看不到你的图片......：D，但是在你的地方我插入了css这段代码

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

这删除了图片标签上的任何空格...尝试并期待...... 它，如果您插入图像链接将不胜感激... :) 很容易理解

Answer 2

谈论哪个图像“徽标”或

<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; }

内容中的其他属性

我认为这样做，如果没有请详细解释.. :)

为什么插入图像会将页面向左移动

2 个答案: