Question

我有一个非常简单的布局来介绍我正在访问的俱乐部的网页设计，具有讽刺意味的是，我无法让它工作。我一直在尝试和尝试，我感觉我错过了一些明显的东西。这是代码：

<head>
<title>Scooby-Doo on Zombie Island
</title>
<style>
body {
background-image: url('https://lh3.googleusercontent.com/-O-EF2xvEtxQ/TYwND_eHYpI/AAAAAAAAAY8/_pkalo1cASU/s1600/vlcsnap-2011-03-24-23h31m32s96.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
p {
color: #fff;
}
#scooby-title {
margin-left: 325px;
margin-top: -10px;
max-width: 400px;
height: auto;
-webkit-transform: rotate(2.5deg);
    -moz-transform: rotate(2.5deg);
    -o-transform: rotate(2.5deg);
    -ms-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
}
#real {
top: 20px;
right: 30px;
}
</style>
</head>
<body>
<img src="http://fanart.tv/fanart/movies/13151/hdmovielogo/scooby-doo-on-zombie-island-5223b1ea2a286.png" id="scooby-title" />
<div id="real">
<p>"This time, the monsters are real"</p>
</div>
</body>

无论出于何种原因，div“真实”都不会让步。帮助

Answer 1

#real {
    margin-top: 20px;
    margin-right: 30px;
    float: right;
}

Answer 2

这是因为你忘了设置位置css

#real {
  position:absolute;
  top: 140px;
  right: 90px;
}

这里有一个帮助你的JSFiddle ..

http://jsfiddle.net/DGN6N/

Answer 3

从您的帖子中可以清楚地知道您要对文本做些什么。

我会使用margin属性，它基本上清除元素周围的空间并定位它。

#real {
  margin-top: 20px;
  margin-right: 30px;
}

专业提示：您也可以将这些组合成一个属性，以便更轻松。

margin: top right bottom left;

在你的情况下：

margin: 20px 30px 0 0;

如果您希望垂直/水平地浮动或居中文本，请更加具体。需要额外的标记。

Answer 4

希望你试图将#real div对齐。只需像

一样

#real {
    width:60%;
    margin:0 auto;
}

Div不定位

4 个答案: