Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/77.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html Div没有定位_Html_Css - Fatal编程技术网

Html Div没有定位

Html Div没有定位,html,css,Html,Css,我有一个非常简单的布局来介绍我正在访问的一个俱乐部的网页设计,讽刺的是,我无法让它工作。我一直在努力,我觉得我错过了一些明显的东西。 代码如下: <head> <title>Scooby-Doo on Zombie Island </title> <style> body { background-image: url('https://lh3.googleusercontent.com/-O-EF2xvEtxQ/TYwND_eHYpI/AAAAA

我有一个非常简单的布局来介绍我正在访问的一个俱乐部的网页设计,讽刺的是,我无法让它工作。我一直在努力,我觉得我错过了一些明显的东西。 代码如下:

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

僵尸岛上的史酷比
身体{
背景图像:url('https://lh3.googleusercontent.com/-O-EF2xvEtxQ/TYwND_eHYpI/AAAAAAAAAY8/_pkalo1cASU/s1600/vlcsnap-2011-03-24-23h31m32s96.png');
背景大小:100%100%;
背景重复:无重复;
背景附件:固定;
}
p{
颜色:#fff;
}
#史酷比头衔{
左边距:325px;
利润上限:-10px;
最大宽度:400px;
高度:自动;
-webkit变换:旋转(2.5度);
-moz变换:旋转(2.5度);
-o变换:旋转(2.5度);
-ms变换:旋转(2.5度);
变换:旋转(2.5度);
}
#真实的{
顶部:20px;
右:30px;
}
“这次,怪物是真的”


无论出于何种原因,“real”部门都不会让步。帮助?

是因为您忘记设置位置

#real {
    margin-top: 20px;
    margin-right: 30px;
    float: right;
}
#real {
  position:absolute;
  top: 140px;
  right: 90px;
}
这里有一个JSFiddle来帮助您


从你的帖子中不清楚你到底想对文本做什么

我将使用margin属性,它本质上清除元素周围的空间并定位元素

#real {
  margin-top: 20px;
  margin-right: 30px;
}
专业提示:您还可以将这些属性组合到一个属性中,以使其更简单

margin: top right bottom left;
就你而言:

margin: 20px 30px 0 0;

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

希望您尝试将#real div居中对齐。只需像这样做即可

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

你想做什么?谢谢你的回复!对不起:下次我会说我需要帮助的话!