爲什麼插入圖像將頁面向左移動

嗨，大家好，我有一個問題，那就是爲什麼當我插入圖像並返回時，我網站的整個頁面爲什麼略微向左移動（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; 
}

來源

2013-03-14 Ben Dee

創建小提琴http://jsfiddle.net/ – 2013-03-14 06:35:57

不能看到你的圖片...：d，但在你的地方，我插入的CSS驗證碼

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

這將刪除任何空格aruound圖像標記...嘗試它，並期待着... 它，會grat e。如果插入圖片鏈接... :) 伊斯利瞭解

來源

2013-03-14 06:41:51 Juris

談到這形象「標誌」或

<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-14 07:04:56 MarmiK

爲什麼插入圖像將頁面向左移動

回答

相關問題