Question

我不能为我的生活找到为什么content2 div中的信息继续放大，我想这是由于使用了负边距。有没有办法解决？任何想法或修正？

HTML

<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css" />
<title>Programs R Us</title>
</head>

<body>
<div id="body">
<div id="wrap">

<!--header starts-->
<div id="header">
<div id="name">
<h1>Programs <span>R</span> Us</h1>
</div><!--end name-->   
<div id="nav"><br>
    <ol>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact Us</a></li>
        <li><a href="programs.html">Our Programs</a></li>
    </ol>
</div><!--end nav-->
</div><!--end header-->
<!--header ends-->

<!--content1 starts-->
<div id="content1">
<img src="images/placeholder.png" width="400" height="323" alt="logo"> 
<div id="imgright">
<h2>What We Do</h2>
<p>paragraph</p>
<div id="button"><a href=#>
<h4>Request A Program</h4></a>
</div><!--end button-->
</div><!--end imgright-->
</div><!--end content1-->
<!--content1 ends-->

<!--content2 starts-->
<div id="content2">
<div id="one">
<img src="images/arrow.png" width="70px" height="50px;" alt="arrow1">
  <h3>Contact Us</h3>
  <p>"Lorem ipsum dolor sit amet, 
    consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad 
    minim veniam"</p> 
</div><!--end one-->

<div id="two"> 
<img src="images/arrow.png" width="70px" height="50px;" alt="arrow1">
  <h3>About Us</h3>
  <p>"Lorem ipsum dolor sit amet, 
    consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad 
    minim veniam"</p>
</div><!--end two-->

<div id="three">
<img src="images/arrow.png" width="70px" height="50px;" alt="arrow1">
  <h3>View Our Programs</h3>
  <p>"Lorem ipsum dolor sit amet, 
    consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad 
    minim veniam"</p>
</div><!--end three-->  
</div><!--end content2-->
<!--content2 ends-->

<!--footer starts-->
<div id="footer">
<h5>Insert some footer information, copyright information also</h5>
</div><!--end footer-->
<!--footer ends-->

</div><!--end wrap-->
</div><!--end body-->
<div id="blue">
</div><!--end blue-->
</body>
</html>

CSS

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

html, body{
    margin:0;
    padding:0;
}

body{
    background-image:url(images/background.jpg);
    overflow: auto;
}

#body{
    margin-top:-25px;
    margin-bottom:25px;
    padding:0;
}

#wrap{
    width:1124px;
    height:100%;
    margin:0 auto;
    padding-top:5px;
}

#header h1{
    font-size:36px;
    font-family: Terminal, Verdana, Geneva, sans-serif;
    color: white;
}

#header span{
    font-size:100px;
    color:black;
    font-family:"brush script std", Verdana, Geneva, sans-serif;
}

#nav{
    margin-top:-90px;
    margin-bottom:75px;
    margin-right:40px;
    background-color:#2e3192;
    float:right;
    margin-left:-300px;
    border-radius:10px;
    -moz-border-radius:10px;
}

#nav ol {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
    background-color:#2e3192;
    margin-top:-10px;
}

#nav li {
    display: inline;
}

#nav a {
    display: block;
    float: left;
    margin-right: 3px;
    padding: 10px 20px;
    text-decoration: none;
    font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: white;
    padding-top:0px;
    padding-bottom:10px;
}

#nav a:hover { 
    text-decoration: none; 
    color: black;
}

#content1 img{
    margin-left:25px;
}

#imgright{
    margin-left:445px;
    margin-top:-389px;
}

#button h4{
    font-family:"Times New Roman", Times, serif;
    font-size:24px;
    color:white;
    padding-left:10px;
}

#button{
    margin-left:-400px;
    margin-top:-50px;
    margin-bottom:110px;
    border-radius:10px;
    -moz-border-radius:10px;
    background-color:#ff0000;
    width:220px;
}

#button a{
    text-decoration:none;
}

#button a:hover{
    text-decoration:underline;
    color:white;
}

h2{
    font-family:"Times New Roman", Times, serif;
    font-size:48px;
}

#imgright p{
    color: white;
    font-size:24px;
    font-family: "Times New Roman", Times, serif;
    margin-top:-30px;
    margin-left:20px;
}

#content2{
    background-color:#2e3192;
    overflow-x:visible;
    width:100%;
    height:100%;
}

#one, #two, #three{width:341.3px;}

#one img, #two img, #three img{padding-right:10px;}

#one h3, #two h3, #three h3{
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:white;
    padding-bottom:2px;
    border-left-width:3px;
    border-left-style:solid;
    border-left-color:white;
    padding-left:6px;
    padding-top:4px;
}

#one h3{
    font-family:trajan pro, Verdana, Geneva, sans-serif;
    color:white;
    margin-left:80px;
    margin-top:-40px;
}
#one p{
    font-family:vijaya, Verdana, Geneva, sans-serif;
    color:white;
}

#two h3{
    font-family:trajan pro, Verdana, Geneva, sans-serif;
    color:white;
    margin-left:80px;
    margin-top:-46px;
}
#two p{
    font-family:vijaya, Verdana, Geneva, sans-serif;
    color:white;
}

#three h3{
    font-family:trajan pro, Verdana, Geneva, sans-serif;
    color:white;
    margin-left:80px;
    margin-top:-46px;
}

#three p{
    font-family:vijaya, Verdana, Geneva, sans-serif;
    color:white;
}

#one{
    margin-top:50px;
}

#two{
    margin-top:-270px;
    margin-left:360px;
}

#three{
    margin-top:-140px;
    margin-left:720px;
    margin-bottom:0px;        
}

#footer {
 clear: both;
 position: relative;
 z-index: 10;
 height: 3em;
 margin-top: 10px;
}

#footer h5{
    margin-left:300px;
}

#blue{
    position:absolute;
    top:619px;
    z-index:-1;
    background-color:#2e3192;
    height:100%;
    width:100%;
}

问题图片 margins moving

问题图片 jsfiddle, i think

Answer 1

您需要清理CSS。这是一个混乱，难以导航，并包含多余的定义。
您的大部分CSS都使用宽度，位置，边距等显式值。尝试使样式工作没有所有内容的绝对值。尝试使用相对值;这使得设计更易于管理，并且不易出现奇怪的渲染故障。
最后，您的问题有点难以理解。是的，代码和图片很有帮助，但提供一个更好的工作示例。它使SO社区的故障排除变得更加容易。

无论如何，看看这是否有帮助。请务必清除#one, #two, #three的当前CSS定义。我在工作示例中做了一些小改动，主要是因为我可以让页面正确呈现。

工作示例： http://jsbin.com/olaxaj/1/

相关CSS

#one, #two, #three {
  display:inline-block;
  padding:.5em;
}

负边距会导致内容在缩放期间移动

1 个答案: