gpt4 book ai didi

html - DIV 位置?结盟

转载 作者:行者123 更新时间:2023-11-28 03:44:18 24 4
gpt4 key购买 nike

我试图像这样显示页面。 Have to make DIV like this

Current Status

我正在尝试将 div 作为第一张图片,但当前对齐方式类似于第二张图片。

标题和菜单区域必须固定在顶部。请让我知道我做错了什么......

这是html代码,

        <div class="menu_wrapper">
<div class="base menu ttl_bar">
TITLE
</div>
<div class="base menu ttl_big">
MENU
</div>
</div>

<div class=" map_area">
MAP AREA
</div>
<div class=" contents_area" id="draggable">
CONTENTS AREA

</div>

下面是CSS

   body{margin: 0; padding:0;}
div {width:100vw;display: inline-block;}

.menu_wrapper {position: fixed; top:0; height: auto;}
.menu {background-color: red; height: 100px; }
.map_area {background-color: blue; height: 300px;}
.contents_area {height: 500px;}

.ttl_bar {position: relative;}
.ttl_big {position: relative;}

请帮我解决问题。

最佳答案

将 margin-top 添加到 map-area 应该适合你。

.map_area {background-color: blue; height: 300px; margin-top:200px;}

此外,

从 div 样式中删除 display:inline-block。看起来布局只要求它们是 block 级的。

编辑

你也可以试试这个:

body{ padding-top:200px; }
.map_area{ z-index:222; }

关于html - DIV 位置?结盟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44068989/

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