float 属性在我的 css 中不起作用
[英]The float property is not working in my css
问题描述
This is the code of my html in this when I set the #login id to float right it just overlap the #about-blog id.
这是我的 html 代码，当我将 #login id 设置为向右浮动时，它只是与 #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;
}
Here is the full code {below the code I have provided more information}这是完整的代码{下面我提供了更多信息的代码}
<<!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>
how can I set the login to right And just overlap the about blog by a few pixles.我怎样才能将登录设置为正确的并且只是将关于博客的几个像素重叠。
5 个解决方案
解决方案1
4 已采纳 2016-03-30 05:40:59
如果您使用position:absolute尝试right:0而不是float:right和left:0而不是float:left
解决方案2
3 2016-03-30 06:14:19
if you are using position:absolute you can't use floating cos the element is detached of the document that's why floating property won't work.如果您使用position:absolute ，则不能使用浮动 cos 元素与文档分离，这就是为什么浮动属性不起作用的原因。
You can use right:0 or left:0 and the element will be forced to go left or right of the document.您可以使用right:0或left:0并且元素将被强制移动到文档的左侧或右侧。
解决方案3
1 2016-03-30 05:35:59
Your float doesn't work because you also use position: absolute .您的浮动不起作用，因为您还使用position: absolute 。
I removed position: absolute , as it will just give you problems down the road, and added float: left to #about-blog , this way, if you want to add any extra info, it will flow properly.我删除了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;
}
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*/
<!--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>
解决方案4
1 2020-06-22 16:28:27
You can do margin-left: auto;你可以做margin-left: auto; to that element using id使用 id 到该元素
解决方案5
-1 2016-03-30 06:06:57
Try this code:试试这个代码：
#login{
background-color: #00FFFF;
float: right;
clear: right;
width: 70%;
height: 40%;
position: absolute;
z-index: 2;
}
I added clear: right;我加clear: right; on it, I think it will work!在它上面，我认为它会起作用！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.