gpt4 book ai didi

html - Div 的移动和调整大小协调一致

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

我正在努力做到这一点,当一个 div 的高度变小时,另一个 div 会随之向上移动。

这是一个 fiddle.

因此,如果我要使 #top(具有绝对定位)的高度为 400px 而不是 600px,我如何确保它下方相对定位的 div 从顶部,从它原来的 620px 位置开始?

基本上,它是响应浏览器。如果浏览器变小,#top 会缩放,所以下面的 div 需要随之移动。

更新

HTML:

<!DOCTYPE HTML>
<html lang="en-UK">
<head>
<link href="Stylesheet.css" rel ="stylesheet" type="text/css">


<title>Hello World</title>
</head>
<body>
<div id="top"></div>
<div id ="logo"></div>
<div class="container">A wiki (i/ˈwɪkiː/ wik-ee) is a website which allows its users to add, modify, or delete its content via a web browser usually using a simplified markup language or a rich-text editor.[1][2][3] Wikis are powered by wiki software. Most are created collaboratively.
Wikis may serve many different purposes, such as knowledge management and notetaking. Wikis can be community websites and intranets, for example. Some permit control over different functions (levels of access). For example, editing rights may permit changing, adding or removing material. Others may permit access without enforcing access control. Other rules may also be imposed for organizing content.
Ward Cunningham, the developer of the first wiki software, WikiWikiWeb, originally described it as "the simplest online database that could possibly work."[4] "Wiki" (pronounced [ˈwiti] or [ˈviti]) is a Hawaiian word meaning "fast" or "quick".[5]A wiki (i/ˈwɪkiː/ wik-ee) is a website which allows its users to add, modify, or delete its content via a web browser usually using a simplified markup language or a rich-text editor.[1][2][3] Wikis are powered by wiki software. Most are created collaboratively.
Wikis may serve many different purposes, such as knowledge management and notetaking. Wikis can be community websites and intranets, for example. Some permit control over different functions (levels of access). For example, editing rights may permit changing, adding or removing material. Others may permit access without enforcing access control. Other rules may also be imposed for organizing content.
Ward Cunningham, the developer of the first wiki software, WikiWikiWeb, originally described it as "the simplest online database that could possibly work</div>
</body>
</html>

CSS:

body{
background-color: red;
width: 100%;
}

div#top{
position: relative;
display: block;
width:100%;
height: 600px;
top:0;
left:0;
background-color: black;
border-bottom: 3px solid white;
margin-bottom: 20px;

}


div#logo{
position:absolute;
color: green;
left: 50%;
margin-top: 20px;
margin-bottom: 30px;
}


.container{
position: relative;
margin: 0 auto;
margin-top: 20px;
width: 920px;

}​

填充问题

enter image description here

最佳答案

假设您需要将 #top 保持为 position: absolute,没有纯 CSS 的方法可以做到这一点。由于 #top 是绝对的,它不再是文档流的一部分,#container 也不再与它相关。你也可以

一个。使用 javascript 观察 window.resize 事件或您所指的任何调整大小事件,然后执行数学运算以更改 #containertop 属性>

B.将 #top 更改为 position: relative 并从 #container

中删除 top CSS 属性

C.为 #top 的高度和 #containertop 属性使用基于百分比的值。

关于html - Div 的移动和调整大小协调一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11917588/

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