-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

サスが吐き出す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 に答える