gpt4 book ai didi

html - 文本导致 div 变大

转载 作者:行者123 更新时间:2023-11-28 07:50:36 24 4
gpt4 key购买 nike

我正在创建一个着陆页,上面有一张图片和文字。

我有包含文本的 div 作为图像 div 的子 div,并且图像使用视口(viewport)高度来填充整个屏幕,但是一旦我在居中的子 div 中插入文本,由于某种原因图像调整了高度,并且有不需要的滚动空间。我尝试了不同的显示类型,以及一切。

我做了一个例子,一个有显示文本的div,一个没有

带有文本和额外的滚动空间:http://jsfiddle.net/g7ch1p0j/

<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>

<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>

没有文字,图像和下面的内容之间没有滚动空间:http://jsfiddle.net/sctcebmf/

<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>

<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>

在看到图像的末尾(黑框)之前,您会看到文本稍微向上移动(捕获滚轮并缓慢向下拖动),这是因为额外的问题。这没有出现在第二个例子中。

最佳答案

通过将 #lander_meta 的位置更改为 absolute,添加 width:100% 并使其 p 标签 text-align: center.

Working fiddle .

关于html - 文本导致 div 变大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30445077/

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