gpt4 book ai didi

html - 我如何将 div 堆叠在彼此的旁边和之上?

转载 作者:太空狗 更新时间:2023-10-29 16:36:53 25 4
gpt4 key购买 nike

我对html或css了解不多,但我已经做了这么多;

enter image description here

我想堆叠 div,所以它看起来像这样(请原谅画得不好);

enter image description here

我在谷歌上搜索了如何操作并尝试了不同的方法,但喜欢/不喜欢的框最终总是不动或移到最左边/最右边。

<div style="float:left;width:300px;height:350px;text-align:center;">
<div style="float:left;width:500px;height:200px;text-align:center;">
<div id="wrapper">
<div style="align=center;">
<div id="first">1</div>
<div id="second">2</div>

这是我拥有的三个 div。第一个有链接 [添加/消息等]

第二个有“thelastgecko”和个人资料文本。

我正在尝试使用最后一个框表示喜欢/不喜欢,但无论我做什么都不起作用。

最佳答案

您通常使用一个“巨大”的 div,将其设置为低于 1024 像素宽以便旧屏幕可以查看它,然后您通常将其置于屏幕中央。然后在那个大的 div 里面,你把“添加我 - 给我发消息 - 图库”和“float:left”或“position:absolute”我更喜欢后者。然后你制作另一个包含“The last gecko”+不喜欢和喜欢的div并将那个div居中,然后我会制作另一个div并做一个“float:right”或“position:absolute; left:'huge width减去这个宽度”。

我确实将所有内容都写成文本且可读,因为放弃代码也不会教学



但如果您仍然不明白,这是我的想法:

<html>
<head>
<style>
body{margin:0px;padding:0px;width:100%;height:100%;}
#container{width:900px;margin:auto;margin-top:200px;}
#add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;}
#last_gecko,#holder{margin:auto;width:500px;background-color:#eca;}
#likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;}
#dislikes{background-color:#cea;}
#dislike_text{margin-left:700px;background-color:#eac;}
</style>
</head>
<body>
<div id="container">
<div id="add_me">add me<br>message me<br>wuts going on</div>
<div id="dislike_text">dislike text</div>
<div id="last_gecko">
Last Gecko
<div id="holder">
<div id="dislikes">dislikes</div>
<div id="likes">likes</div>
</div>
</div>
</div>
</body>
</html>

让它可行,它至少会告诉你移动的方向,这可能不是最好的方式,但这是我的方式。

关于html - 我如何将 div 堆叠在彼此的旁边和之上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15980688/

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