Question

我试图让我的网站适应不同的屏幕尺寸。所以，你可以在这个视频中看到我的问题，我已经尝试了相对的，绝对的位置+弹性框...没有任何帮助......一个块移动到网站的顶部..如何修复此块？它应该改变大小，但它应该移动到网站的顶部。

https://www.youtube.com/watch?v=ybHQ1CVr6fs

@charset "utf-8"

*{
	margin:0px;
	padding: 0px;
}


body{
	width:98%;
	height: 100%;
	background: #fff;
	margin-left: 1%;
	margin-right:1%;
	font-size: 1em; 
	font-family: "FF Meta Serif" Serif;
	line-height: 120%;
}

footer,#page-wrap:after{
content: "";
display: block; 
}

#page-wrap{
	min-height: 95%;
	position: relative;
	
}



#logo{
	float:left;

	

}

img.logo{
	width: auto;
	height: auto;
}

img.icq{
	max-width: 100%;
	height: auto;
}

#menu1{
	float:left;
	margin-left:10%;
	width:50%;
}

li{
	display: inline;
	list-style-type: none;
}

li.first{
	padding-left: 5%;
}

li.second{
	padding-left: 25%;
}

li.third{
	padding-left: 25%;
}
#support{

	float:left;
	width: 15%;


	line-height: 120%;
	margin-left: 10%;
}

span.icqnumber{
	font-family: 'Times New Roman', Times, serif;
	font-size: 1.6em;
	color:#009a00;
    font-weight: bolder;
    line-height: 0%;
}

#supporttitle{
	
	width:80%;
	float:right;
	margin-right: 10%;
}
span.support-worktime{
	font-family: 'Times New Roman',Times,serif;
	color: #999999;
	font-size:1em;
	font-weight: 250;
}

.my-flex-container{
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;

position: absolute;
margin-top: 5%;
overflow: none;

}

.my-flex-block1{
	
}

.my-flex-block2{
	background:#efefef;
}

p.slogan1{
	font-family: 'Times New Roman',Times,serif;
	font-size:2em;
	line-height: 5%;
}

p.slogan2{
	font-family: 'Times New Roman',Times,serif;
	font-size:2em;
	line-height: 5%;
}

#loginform{
	border-collapse: collapse;
	
	


}

h3{
	text-align:left;
	padding-left: 5%;
}

form{
	width: 100%;
	padding-left: 5%;
	
}

input.login-field{
	width: 90%;
}


input.loginbutton{
	margin-left: 72%;
	
	background-color: #9b9999;
	color:#fff;
	padding-top: 0px;

}

input[type="text"]{
	margin-bottom: 2%;
}

p.forgot{
	color:gray;
	text-decoration: underline;
	margin-top: -10%;
	margin-left: 6%;
	font-size: 0.9em;
	padding-left: 1%;
}

span.remember{
	margin-left: -2%;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<title>PROFIT-CENTER.RU</title>
	<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="page-wrap">
 <header>
	<div id="logo">
		<img class="logo" src="logo.png" alt="logo">
	</div>
	 <div id="menu1">
		<ul>
		   <li class="first"><a href="#">Условия</a></li>
		    <li class="second"><a href="#">Поддержка</a></li>
			<li class="third"><a href="#">Форум</a></li>
		</ul>
	</div>
	<div id="support">
	 <img src="icq.png" alt="icq" class="icq">
	 <span class="icqnumber">361855340</span>
	<div id="supporttitle">
	 <span class="support-worktime">Служба поддержки 24/7</span>
	</div>
	</div>
</header>  	
<div class="my-flex-container">
	<div class="my-flex-block1">
		<p class="slogan1">Заработай на своих</p>
	       <p class="slogan2">сайтах больше!</p>
   </div>
	


	


    <div class="my-flex-block2">
    <h3>Вход</h3>
     <form action="" method="post" accept-charset="utf-8">
		<input type="text" name="login" value=""  class="login-field">
		<br>
		<input type="password" name="login" value="" class="login-field">
		<br>
		<input type="checkbox">
		<span class="remember">Запомнить меня</span>
		<input type="button" name="login" value="Войти" class="loginbutton">
		<div class="forgot">
			<p class="forgot">Я забыл пароль</p>

		</div>
	</form>
	</div>	
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Answer 1

您需要清除filterList上的浮动。由于它主要包含浮动元素（从文档流中取出），所以后面的任何元素都会占用它的空间。

您可以阅读有关清除/包含浮动here的不同方法。我使用了下面的clearfix技术。

header

.clearfix::after {
    content: '';
    display: table;
    height: 0;
    clear:both;
}

@charset "utf-8" * {
  margin: 0px;
  padding: 0px;
}

body {
  width: 98%;
  height: 100%;
  background: #fff;
  margin-left: 1%;
  margin-right: 1%;
  font-size: 1em;
  font-family: "FF Meta Serif" Serif;
  line-height: 120%;
}

footer,
#page-wrap:after {
  content: "";
  display: block;
}

#page-wrap {
  min-height: 95%;
  position: relative;
}

#logo {
  float: left;
}

img.logo {
  width: auto;
  height: auto;
}

img.icq {
  max-width: 100%;
  height: auto;
}

#menu1 {
  float: left;
  margin-left: 10%;
  width: 50%;
}

li {
  display: inline;
  list-style-type: none;
}

li.first {
  padding-left: 5%;
}

li.second {
  padding-left: 25%;
}

li.third {
  padding-left: 25%;
}

#support {
  float: left;
  width: 15%;
  line-height: 120%;
  margin-left: 10%;
}

span.icqnumber {
  font-family: 'Times New Roman', Times, serif;
  font-size: 1.6em;
  color: #009a00;
  font-weight: bolder;
  line-height: 0%;
}

#supporttitle {
  width: 80%;
  float: right;
  margin-right: 10%;
}

span.support-worktime {
  font-family: 'Times New Roman', Times, serif;
  color: #999999;
  font-size: 1em;
  font-weight: 250;
}

.clearfix::after {
  content: '';
  display: table;
  height: 0;
  clear: both;
}

.my-flex-container {
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  position: absolute;
  margin-top: 5%;
  overflow: none;
}

.my-flex-block1 {}

.my-flex-block2 {
  background: #efefef;
}

p.slogan1 {
  font-family: 'Times New Roman', Times, serif;
  font-size: 2em;
  line-height: 5%;
}

p.slogan2 {
  font-family: 'Times New Roman', Times, serif;
  font-size: 2em;
  line-height: 5%;
}

#loginform {
  border-collapse: collapse;
}

h3 {
  text-align: left;
  padding-left: 5%;
}

form {
  width: 100%;
  padding-left: 5%;
}

input.login-field {
  width: 90%;
}

input.loginbutton {
  margin-left: 72%;
  background-color: #9b9999;
  color: #fff;
  padding-top: 0px;
}

input[type="text"] {
  margin-bottom: 2%;
}

p.forgot {
  color: gray;
  text-decoration: underline;
  margin-top: -10%;
  margin-left: 6%;
  font-size: 0.9em;
  padding-left: 1%;
}

span.remember {
  margin-left: -2%;
}

我如何修复一个块？

1 个答案: