gpt4 book ai didi

html - 使用 CSS 转置 div 元素

转载 作者:可可西里 更新时间:2023-11-01 13:40:03 25 4
gpt4 key购买 nike

我会跳到一个例子。

<!DOCTYPE html>
<head>
<title>Transposing div using CSS</title>

<style>
div#wrapper {
}

div#menu {
border:blue solid 1px;
}

div#main {
border:red solid 1px;
}
</style>
</head>

<body>
<p>How do we show the menu div immediately after the content div?</p>
<div id="wrapper">
<div id="menu">Menu</div>
<div id="main">Content</div>
</div>
</body>
</html>

在浏览器中,菜单 div 将首先出现在流程中。现在假设我需要更改布局,以便“菜单”跟随内容 div 内容。如何仅使用 CSS 来完成此操作。这意味着不会更改 HTML(没有用户代理检测内容),也没有 JavaScript 代码。

定位元素的主要 CSS 技术是使用 float:right|left 属性。相对于它们的边界框移动元素效果很好,但我正在考虑在正常流程中移动其后继元素末尾的元素。

这是用例。我希望网站在小屏幕浏览器(如 iPhone)上以最佳方式显示。该网站目前的菜单位于顶部,内容位于下方,这是一种非常常见的布局,但在 iPhone 上,实际空间非常有限,因此最好将菜单置于主要文本内容之后。

该解决方案仅适用于 iPhone 和 Android 手机(基于 WebKit)。所以不需要考虑 Internet Explorer黑客等。

最佳答案

如果您的菜单具有固定高度(这很可能是这样),您可以使用与粘性页脚相同的原则:在 wrapper 上应用相对位置,以及与菜单高度相同的底部填充。在代码中:

div#wrapper {
height: 100%;
padding-bottom: 100px;
position: relative;
}

div#menu {
border:blue solid 1px;
position: absolute;
bottom: -2px; /*to offset the border pxs*/
height: 100px;
width: 100%;
}

div#main {
border:red solid 1px;
}

您可以在此处查看实际效果:http://jsfiddle.net/3ZheQ/

关于html - 使用 CSS 转置 div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5353134/

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