Question

对不起，我尝试了所有的东西，试了30分钟都得不到任何东西。好的，这是我的代码。出于某种原因，“div2”不起作用而且没有向下移动但只能左右移动。我希望它能够从屏幕的顶部或底部向下和向下移动，但它只能左右移动并且与导航栏位于同一级别

body {
   background-color: LightGoldenRodYellow;
   font-family:"Arial Black", Gadget, sans-serif;
 }

 #rightcolumn {
  float: left;
 margin-left: 100px;
 }

#wrapper {
 background-color: #33CC00;
 color: #000066;
}

 #midcolumn {
  float: left;
  width: 100px;  
  Margin: 15px;
 }

 #leftcolumn {
 float: left;
 width: 100px;
 margin: 10px;
 }

 #footer {
    clear: both;
    position: relative;
     z-index: 10;
    height: 3em;
    margin-top: -3em;
}


  .navbar {
  text-decoration: none;
  margin: 15px;
 display: block;
 }

 .div2{
 position:absolute;
 float: left;
 left: 200px;
 margin-top:100px:
 }


 .title{
 color: LightCoral;
 position:absolute;
 left: 50%;
 top: 10%;
 }

 .titlesub{
 color: Green;
 position:absolute;
 font-size: 12pt;   
 left: 50%;
 top; 30%;
 }


 .content{
 color: LightCoral;
 }

确定下一个文件

<!doctype htm>

<html>

<head>
<link href="midterm_helper.css" rel="stylesheet" type="text/css" />
<title>Vacation Destination </title>

</head>


<body>

<h1 class="title">

Vacation Island

<p class="titlesub">

~vacation awaits!

</p>




</h1>

<p class="div2">
        test
        </p>



        <div>
            <a class="navbar" href="hotel_form.html" target="_blank">Reservations</a>

             <a class="navbar" href="hotel_room.html"         target="_blank">Rooms</a>

            </div>




















</body>

</html>

Answer 1

要从底部定位div2，请尝试将bottom值赋予div

.div2{
    bottom:0; // change the value as you need
}

Answer 2

如果你们中的任何人真的不愿意阅读他的代码，你会发现他的顶级样式后面有一个冒号而不是分号; < / p>

这将做你想做的事。浮动：左;但是没有必要：）

 .div2{
 position:absolute;
 float: left;
 left: 200px;
 margin-top:100px;
 }

Answer 3

为什么你在课堂上同时给位置和浮动。如果您使用了position:absolute，那么您可以将值提供给top bottom和left以及right。

你的HTML代码也搞砸了。删除不需要的空间，并首先使其成为正确的HTML。

例如，您正在给位置并同时浮动元素。你应该一次只使用一个。

.div2{
 position:absolute; /*either you should remove it*/
 float: left; /*or you should remove this line*/ 
 left: 200px;
 top:100px;
 left:0;
 }

Answer 4

您可以将top设置为按left

设置的方式上下移动div2

.div2{
top: 20px;    /*set the value depending upon your requirement */
}

尽管排名靠前，但Div并没有下降

4 个答案: