没定位

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;
}

没定位

问题描述

4 个解决方案

解决方案1
1 已采纳 2014-07-02 02:56:56

解决方案2
0 2014-07-02 03:44:58

解决方案3
0 2014-07-02 04:02:27

解决方案4
0 2014-07-02 05:00:15

没定位

问题描述

4 个解决方案

解决方案1 1 已采纳 2014-07-02 02:56:56

解决方案2 0 2014-07-02 03:44:58

解决方案3 0 2014-07-02 04:02:27

解决方案4 0 2014-07-02 05:00:15

解决方案1
1 已采纳 2014-07-02 02:56:56

解决方案2
0 2014-07-02 03:44:58

解决方案3
0 2014-07-02 04:02:27

解决方案4
0 2014-07-02 05:00:15