gpt4 book ai didi

css - 如何在缩放级别更改时使两个元素完好无损?

转载 作者:太空宇宙 更新时间:2023-11-04 06:52:35 25 4
gpt4 key购买 nike

我有一个带有横幅和底部边框的简单标签。如何停止在缩放时滑动这两个元素?我一直在寻找一种方法来使这两个元素在放大和缩小时保持完整。即使经过几个小时的搜索,我也无法获得所需的输出。我试过 this还有一篇文章说要从 px 更改为 em。

我的 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">
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height= 160">
</div>
<div id="container-border">
</div>
</body>

CSS:

 #header
{ padding:0 20px;
display:block;
margin:0 auto;
background: #D6D6D6 url(background.jpg) repeat-x;
height: 205px;
width: 1500px;
position: center;
}


#container-border {
width: 1538px;
height:900px;
margin-left:260px;
border-color: black;
border-width: 1px;
border-style: solid;
}

最佳答案

您首先需要将内容包装在一个包含 DIV 中

HTML

  <div class="site-content">
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height="160">
</div>
<div id="container-border">
</div>
</div>

注意新的 DIV .site-content。这是您将网站内容居中并控制网站内容宽度的地方。

这是我的代码笔:https://codepen.io/arlcode/pen/aRpWZo

我还建议不要将静态宽度/高度用于移动动态目的。您还需要更多地使用类而不是 ID,因为 ID 是特定的,但类允许您一次操作多个 DIV。

关于css - 如何在缩放级别更改时使两个元素完好无损?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52712550/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com