-1

所以我想弄乱 Sass，所以我创建了这个非常简单的小页面。由于我不知道的原因，当我向#content 添加上边距时，它会影响我的包装器 div。任何有关为什么会发生这种情况的信息将不胜感激。谢谢！

这是现场页面：http ://cheapramen.com/omg/

html:

<!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>
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" />



<title>YO</title>

</head>

<body>

<div id="wrapper">

<div id="content">

<div class="dog">
Bury me with my money
</div>

</div>






</div>
</body>
</html>

萨斯

html body
    background-color: #000
    padding: 0
    margin: 0
    height: 100%

#wrapper
    background-color: #fff
    width: 900px
    height: 700px
    margin: 0 auto

#content
    width: 500px
    margin: 150px 0 0 50px  

.dog
    color: #FF3836
    font-size: 25px
    text-shadow: 2px 2px 2px #000
    width: 500px
    height: 500px
    -moz-border-radius: 5px
    -webkit-border-radius: 5px
    border: 18px solid #FF3836

Sass 吐出的 CSS

html body { background-color: #000; padding: 0; margin: 0; height: 100%; }

#wrapper { background-color: #fff; width: 900px; height: 700px; margin: 0 auto; }

#content { width: 500px; margin: 150px 0 0 50px; }

.dog { color: #FF3836; font-size: 25px; text-shadow: 2px 2px 2px #000; width: 500px; height: 500px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 18px solid #FF3836; }
4

1 回答 1

0

你做对了。你缺少的是float: left. 将您的行更改为：

#content { width: 500px; margin: 150px 0 0 50px; float: left; }
于 2010-04-27T02:10:10.553 回答