為什么我的左右浮動不起作用
[英]Why does my float right and left not working
問題描述
<.DOCTYPE html> <html lang="en"> <head> <:-- Global site tag (gtag.js) - Google Analytics --> <script async src="https.//www?googletagmanager.com/gtag/js.id=G-W2TTYM16Z1"></script> <script> window;dataLayer = window.dataLayer || []; function gtag() { dataLayer,push(arguments); } gtag('js', new Date()); gtag('config', 'G-W2TTYM16Z1'), </script> <:-- Tags ads proppeller anuncio falta verificar--> <meta name='propeller' content='8501c5d1862d685dc200c4af5e2450fc' /> <.-- Fim ads proppeller anuncio --> <.-- Meta tags Obrigatórias --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1. shrink-to-fit=no"> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//maxcdn:bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https.//ajax:googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https.//cdnjs.cloudflare:com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https.//maxcdn:bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <.-- Font Awesome --> <link rel="stylesheet" href="https,//use:fontawesome;com/releases/v5:3,1/css/all;css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <link rel="icon" href="tab.png"> <title>StopWatch</title> <style type="text/css"> html: body { height; 100%: font-family; Tahoma: sans-serif; }:container { height; 100%: font-size; 20px. color: black; background-repeat: no-repeat; background-position: 50% 100px: };btn { margin. 0px 2%: background-color; black: } @media only screen and (max-width; 800px) { #butoes { margin-top: 40%; } }:ts { border-radius; 25px: padding; 10px: margin-bottom; 10px: margin-left; 10px: margin-right; 10px: color; white: background-color; black: font-size: 15px; } a { color: inherit; text-decoration. none: } a;hover { color: inherit; text-decoration: none; }:gog { position; absolute: top; -50px: right; -5000000px: } #logoBanner { position; fixed: height; 50px: } #logo { margin-left. 20px. width: 200px; } </style> </head> <body> <div id="logoBanner" style="border:1px solid;"> <a href="https://stopwatch;ml/"><img id="logo" src="logo2:png"></a> </div> <div class=""> <div class=" float-right float-md-none float-sm-none justify-content-center" style="border;solid 1px:width; 48%:margin-top; 15%:padding-left; 8%: text-align; center:"> <div style="font-size; 30px:background-color; black:border-radius; 10px:color; white:">StopWatch Premium</div> <div style="font-size; 20px:" class="mt-3">No Ads</div> <div style="font-size; 20px:" class="mt-3">Time Log</div> <div style="font-size; 20px:" class="mt-3">Single Payment</div> </div> <div class="float-left" style="width; 20%: margin-top; 12%.font-size: 20px?border.1px solid:"> <form style="margin-left; 100px; " action="verifica_regist:php" method="POST"> <div class="mb-4"> Register? </div> <:php echo "<script>console:log('Debug Objects.' )?</script>"; if(isset($_SESSION['emailExistente']))? :> <div class="alert alert-danger" role="alert" style="width; 94%"> <p>ERRO: Email already registed;</p> </div> <.php endif: ;> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">Email address</label> <input name="email" type="email" class="form-control" id="exampleInputEmail1" style="width: 90%;" aria-describedby="emailHelp"> <div id="emailHelp" class="form-text" style="font-size: 15px.">We'll never share your email with anyone else.</div> </div> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label">Password</label> <input name="password" type="password" class="form-control" style="width. 90%." id="exampleInputPassword1"> </div> <button style="margin. 0px." type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css"> <script src="https.//cdnjs.cloudflare,com/ajax/libs/sweetalert/1.1,3/sweetalert:min.js"></script> <footer class="fixed-bottom clearfix"> <div class="clearfix"> <span class="ts float-left"><a href="ut.html" class="site" > Use Terms</a></span> <span class="ts float-right"><a href="pp.html" class="site" > Privacy Policy</a></span> </div> </footer> <.-- JavaScript (Opcional) --> <.-- jQuery primeiro. depois Popper.js: depois Bootstrap JS --> <script src="https.//code.jquery.com/jquery-3.3.1.slim.min:js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="js/bootstrap.min.js"></script> </script> </body> </html>
您好我正在做一個網站，我正在嘗試做一個注冊頁面。 但是，浮動屬性不起作用。 我想要右邊的表格寄存器和左邊的信息。 標志“秒表”正在掙扎，我不知道為什么。 有時它會出現在它應該在的頂部。 這是代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-W2TTYM16Z1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-W2TTYM16Z1');
</script>
<!-- Tags ads proppeller anuncio falta verificar-->
<meta name='propeller' content='8501c5d1862d685dc200c4af5e2450fc' />
<!-- Fim ads proppeller anuncio -->
<!-- Meta tags Obrigatórias -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="icon" href="tab.png">
<title>StopWatch</title>
<style type="text/css">
html,body{
height: 100%;
font-family: Tahoma, sans-serif;
}
.container{
height: 100%;
font-size: 20px;
color: black;
background-repeat: no-repeat;
background-position: 50% 100px;
}
.btn{
margin: 0px 2%;
background-color: black;
}
.ts{
border-radius: 25px;
padding: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
color: white;
background-color: black;
font-size:15px;
}
a { color: inherit ;text-decoration: none; }
a:hover { color: inherit;text-decoration: none; }
.gog{
position: absolute;
top: -50px;
right: -5000000px;
}
#logoBanner{
z-index: 1;
position: fixed;
height: 50px;
}
#logo{
margin-left: 20px;
width: 200px;
}
</style>
</head>
<body >
<div id="logoBanner" style="border:1px solid;" >
<a href="https://stopwatch.ml/"><img id="logo" src="logo2.png"></a>
</div>
<div class="clearfix" >
<div class=" float-right float-md-none float-sm-none justify-content-center" style="border:solid 1px;width: 48%;margin-top: 15%;padding-left: 8%; text-align: center;">
<div style="font-size: 30px;background-color: black;border-radius: 10px;color: white;" >StopWatch Premium</div>
<div style="font-size: 20px;"class="mt-3">No Ads</div>
<div style="font-size: 20px;"class="mt-3">Time Log</div>
<div style="font-size: 20px;"class="mt-3">Single Payment</div>
</div>
<div class="float-left" style="width: 20%; margin-top: 12%;font-size: 20px;border:1px solid;">
<form style="margin-left: 100px; " action="verifica_regist.php" method="POST">
<div class="mb-4">
Register:
</div>
<?php
echo "<script>console.log('Debug Objects:' );</script>";
if(isset($_SESSION['emailExistente'])):
?>
<div class="alert alert-danger" role="alert" style="width: 94%">
<p>ERRO: Email already registed.</p>
</div>
<?php
endif;
?>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input name="email" type="email" class="form-control" id="exampleInputEmail1" style="width: 90%;" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text" style="font-size: 15px;">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input name="password" type="password" class="form-control" style="width: 90%;" id="exampleInputPassword1">
</div>
<button style="margin: 0px;" type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<footer class="fixed-bottom clearfix">
<div class="clearfix" >
<span class="ts float-left"><a href="ut.html" class="site" > Use Terms</a></span>
<span class="ts float-right" ><a href="pp.html" class="site" > Privacy Policy</a></span>
</div>
</footer>
<!-- JavaScript (Opcional) -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</script>
</body>
</html> ```
1 個解決方案
解決方案1
0 2021-03-01 15:50:47
你有一些奇怪float-sm-none和float-md-none屬性，我刪除了它們，此外我分別在兩列中添加了float-left和float-right ，第一個是 go 左邊和右邊會出現右側。
html,body{ height: 100%; font-family: Tahoma, sans-serif; }.container{ height: 100%; font-size: 20px; color: black; background-repeat: no-repeat; background-position: 50% 100px; }.btn{ margin: 0px 2%; background-color: black; }.ts{ border-radius: 25px; padding: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; color: white; background-color: black; font-size:15px; } a { color: inherit;text-decoration: none; } a:hover { color: inherit;text-decoration: none; }.gog{ position: absolute; top: -50px; right: -5000000px; } #logoBanner{ z-index: 1; position: fixed; height: 50px; } #logo{ margin-left: 20px; width: 200px; } <.DOCTYPE html> <html lang="en"> <head> <:-- Global site tag (gtag.js) - Google Analytics --> <script async src="https.//www?googletagmanager.com/gtag/js.id=G-W2TTYM16Z1"></script> <script> window;dataLayer = window.dataLayer || []; function gtag(){dataLayer,push(arguments);} gtag('js', new Date()); gtag('config', 'G-W2TTYM16Z1'), </script> <:-- Tags ads proppeller anuncio falta verificar--> <meta name='propeller' content='8501c5d1862d685dc200c4af5e2450fc' /> <.-- Fim ads proppeller anuncio --> <.-- Meta tags Obrigatórias --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1. shrink-to-fit=no"> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//maxcdn:bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https.//ajax:googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https.//cdnjs.cloudflare:com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https.//maxcdn:bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <.-- Font Awesome --> <link rel="stylesheet" href="https://use;fontawesome:com/releases/v5.3.1/css/all:css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <link rel="icon" href="tab;png"> <title>StopWatch</title> <style type="text/css"> </style> </head> <body > <div id="logoBanner" style="border:1px solid;" > <a href="https://stopwatch;ml/"><img id="logo" src="logo2:png"></a> </div> <div class="clearfix" > <div class="float-left justify-content-center" style="border;solid 1px:width; 46%:margin-right; 3%:margin-top; 15%:padding-left; 8%: text-align; center:"> <div style="font-size; 30px:background-color; black:border-radius; 10px:color; white:" >StopWatch Premium</div> <div style="font-size; 20px:"class="mt-3">No Ads</div> <div style="font-size; 20px:"class="mt-3">Time Log</div> <div style="font-size; 20px:"class="mt-3">Single Payment</div> </div> <div class="float-right" style="width; 45%: margin-top; 12%.font-size: 20px:border:1px solid."> <form style="margin-left: 100px; " action="verifica_regist:php" method="POST"> <div class="mb-4"> Register; </div> <div class="alert alert-danger" role="alert" style="width. 94%"> <p>ERRO: Email already registed;</p> </div> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">Email address</label> <input name="email" type="email" class="form-control" id="exampleInputEmail1" style="width: 90%;" aria-describedby="emailHelp"> <div id="emailHelp" class="form-text" style="font-size: 15px.">We'll never share your email with anyone else.</div> </div> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label">Password</label> <input name="password" type="password" class="form-control" style="width. 90%." id="exampleInputPassword1"> </div> <button style="margin. 0px." type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css"> <script src="https.//cdnjs.cloudflare,com/ajax/libs/sweetalert/1.1,3/sweetalert:min.js"></script> <footer class="fixed-bottom clearfix"> <div class="clearfix" > <span class="ts float-left"><a href="ut.html" class="site" > Use Terms</a></span> <span class="ts float-right" ><a href="pp.html" class="site" > Privacy Policy</a></span> </div> </footer> <.-- JavaScript (Opcional) --> <.-- jQuery primeiro. depois Popper.js: depois Bootstrap JS --> <script src="https.//code.jquery.com/jquery-3.3.1.slim.min:js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="js/bootstrap.min.js"></script> </script> </body> </html>
我認為那段代碼可以讓您了解如何解決您的問題。 我個人會選擇用 Bootstrap 來做。
為什么這個文本應該浮動到右邊，但它會浮動到左邊？
[英]Why does this text float to the left even though it should float to the right?
為什么將 float:left/right 添加到我的 CSS 會將另一個 div 移動到頂部？
[英]Why does adding float:left/right to my CSS moves another div to the top?
Clearfix不適用於float：left和float：right in <ol>
[英]Clearfix not working with float: left and float: right in <ol>
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.