Question

这是我的html代码，当我将#login id设置为float，它只是重叠#about-blog id。

 #login{
            background-color: #00FFFF;
            float: right;
            width: 70%;
            height: 40%;
            position: absolute;
            z-index: 2;
         }

   #about-blog{
            background-color: #A4DDED;
            width: 30%;
            height: 50%;
            position: absolute;
            z-index: 1;
         }

以下是完整代码{在我提供更多信息的代码下面}

＆＃13;

<<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>Kvians-Home</title>
	<style type="text/css">
         body {
         	background-color: #F0FFF0;
         	color: rgb(255,255,255);
         	font-family: monospace;
         	font-style: italic;
         	font-weight: bold;
         	font-size: 20px;
         }
         .main-heading {
         	background-color: #0048ba;
         	text-align: center;
         	font-size: 35px;
         	font-weight: bold;
         	margin: 0px;
         }
         #login{
         	background-color: #00FFFF;
         	float: right;
         	width: 70%;
         	height: 40%;
         	position: absolute;
         	z-index: 2;
         }
         #about-blog{
         	background-color: #A4DDED;
         	width: 30%;
         	height: 50%;
         	position: absolute;
         	z-index: 1;
         }
         /* all about links */
         a{
         	background-color: #00FF00;
         	color: #00693E;
         	font-weight: Bold;
         	font-size: 25px;
         }
         a:visited{
            background-color: #DFFF00;
            color: #FF7F00;
        }
        a:hover{
        	background-color: #91A3B0;
        	color: rgb(0,0,0);
        }
        .left-margin{
        	margin-left: 5px;
        }
        /* all about links*/
        </style>
</head>
<body> 
<!--facebook SDK-->

<!-- Facebook SDK end-->
  <!--page begin-->
     <h1 class="main-heading">Here You Will Get</h1>
   <!--Main Body Design-->
     <div id="about-blog">
        <h2 class="left-margin">School Feeds</h2>
        <p class="about-blog-para-one left-margin"> Visit our awesome blog,<br> here you will get updates about school</p>
        <a class="left-margin school-feeds"href="http://kvians.weebly.com/school-feeds" target="_blank">Visit</a>
     </div>

    <div id="login">
        <h2>Login</h2>
        <p>Login to <strong>Kvians</strong> from your facebook account, just click the login button here</p>
    </div>

</body>
</html>

＆＃13;

如何将登录设置为正确只需将几个像素的博客重叠一遍。

Answer 1

如果您使用的是position:absolute，请尝试使用right:0代替float:right和left:0代替float:left

Answer 2

如果您使用的是position:absolute，则无法使用浮动元素将元素与文档分离，这就是浮动属性不起作用的原因。

您可以使用right:0或left:0，该元素将被强制显示在文档的左侧或右侧。

Answer 3

您可以使用id对元素进行margin-left: auto;

Answer 4

你的花车不起作用，因为你也使用position: absolute。

我删除了position: absolute，因为它会给你带来问题，并将float: left添加到#about-blog，这样，如果你想添加任何额外信息，它会流畅。

#login{
  background-color: #00FFFF;
  float: right;
  width: 70%;
  height: 40%;
  z-index: 2;
}
#about-blog{
  background-color: #A4DDED;
  width: 30%;
  height: 50%;
  float: left;          /*  added  */
  z-index: 1;
}

＆＃13;

body {
  background-color: #F0FFF0;
  color: rgb(255,255,255);
  font-family: monospace;
  font-style: italic;
  font-weight: bold;
  font-size: 20px;
}
.main-heading {
  background-color: #0048ba;
  text-align: center;
  font-size: 35px;
  font-weight: bold;
  margin: 0px;
}
#login{
  background-color: #00FFFF;
  float: right;
  width: 70%;
  height: 40%;
  z-index: 2;
}
#about-blog{
  background-color: #A4DDED;
  width: 30%;
  height: 50%;
  float: left;
  z-index: 1;
}
/* all about links */
a{
  background-color: #00FF00;
  color: #00693E;
  font-weight: Bold;
  font-size: 25px;
}
a:visited{
  background-color: #DFFF00;
  color: #FF7F00;
}
a:hover{
  background-color: #91A3B0;
  color: rgb(0,0,0);
}
.left-margin{
  margin-left: 5px;
}
/* all about links*/

＆＃13;

<!--facebook SDK-->

<!-- Facebook SDK end-->
  <!--page begin-->
     <h1 class="main-heading">Here You Will Get</h1>
   <!--Main Body Design-->
     <div id="about-blog">
        <h2 class="left-margin">School Feeds</h2>
        <p class="about-blog-para-one left-margin"> Visit our awesome blog,<br> here you will get updates about school</p>
        <a class="left-margin school-feeds"href="http://kvians.weebly.com/school-feeds" target="_blank">Visit</a>
     </div>

    <div id="login">
        <h2>Login</h2>
        <p>Login to <strong>Kvians</strong> from your facebook account, just click the login button here</p>
    </div>

＆＃13;

Answer 5

试试这段代码：

#login{
                background-color: #00FFFF;
                float: right;
                clear: right;
                width: 70%;
                height: 40%;
                position: absolute;
                z-index: 2;
             }

我在其上添加了clear: right;，我认为它会起作用！

float属性在我的css中不起作用

5 个答案: