Question

我想知道如何解决烦人的问题：当我调整浏览器窗口大小时，有些元素会移动。

我确实尝试使用包装器和固定/绝对位置，没有任何作用。

这是我的CSS代码：

/*Importation polices Debut*/
@font-face {
    font-family: 'OswaldR';
    src: url('fonts/OswaldR.otf');
}

@font-face {
    font-family: 'OswaldS';
    src: url('fonts/OswaldS.otf');
}

@font-face {
    font-family: 'OswaldB';
    src: url('fonts/OswaldB.otf');
}

@font-face {
    font-family: 'OswaldL';
    src: url('fonts/OswaldL.otf');
}
/*Importation polices Fin*/

/*Essentials*/
body {
    background-color:#1F1F1F;
    padding:0;
    margin:0;
}
.wrap {
     width: 95%;
     min-width: 900px;
}

html, body, div {
    overflow-x:hidden;
    }
/*Essentials End*/

/*Header Debut*/
#header {
    position:absolute;
    height:60px;
    min-width:100%;
    background-color:#303030;
}

#header .logo {
    padding-left:10px;
    float:left;
    margin-top:14px;
}

#header .connect {
    margin-top:10px;
    margin-right:10px;
    float:right;
    padding-right:10px;
    height:40px;
    min-width:60px;
    background-color:#000000;
}

#header .connect .links {
    padding-top:10px;
    padding-left:10px;
    font-family:"OswaldB";
    font-size:14px;
    text-transform:uppercase;
}

#header .connect .links a:link {
    color: #454545;
    text-decoration: none;
}

#header .connect .links a:visited {
    color: #454545;
    text-decoration: none;
}

#header .connect .links a:hover {
    color: #FFB335;
    text-decoration: none;
}
/*Header Fin*/

/*Base Debut*/
#base {
    min-height:60%;
    min-width:800px;
    background-color:white;
    top: 40%;
    left: 50%;
    position:fixed;
    transform: translate(-50%, -50%);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#base .infobox {
    position:fixed;
    margin-left:20px;
    margin-right:20px;
    margin-top:10px;
    border-style: solid;
    border-width: 1px;
    border-color: #C9C9C9;
    vertical-align: middle;
}

（不要介意评论，我是法语：p）

这是HTML标题和测试页面

的header.php：

<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
    <title>Website</title>
    <div id="header">
        <div class="logo">
            <img src="images/logo.png">
        </div>
        <div class="connect">
            <div class="links">
                <a href="#">Register</a> <a href="#">Login</a>
            </div>
        </div>
    </div>

测试页面：

<?php include 'header.php'; ?>
<div clas="wrap">
<div id="base">
    <div class="infobox">Lorem ipsum dolor sit amet.</div>
    <div class="sep" />
</div>
</div>

正在调整大小的是＆＃34; base＆＃34;格。

谢谢， M4DNE55

Answer 1

#Base等部分元素的属性值为百分比。将它们更改为像素值。

当页面调整大小CSS时停止移动元素

1 个答案: