gpt4 book ai didi

html - 如何在绝对定位元素之间应用水平空间

转载 作者:太空狗 更新时间:2023-10-29 12:33:35 25 4
gpt4 key购买 nike

我创建了一组四个 div 标签,background-color 为黄色,并指定了 widthheight 然后我将其位置设置为 absolute 并将 bottom 设置为 0px ,如下面的代码所示:

 #votingmeter {
width:25em;
height:20em;
background-color:black;
}

.voteindex {
width:2em;
height:8em;
background-color:yellow;
float:left;
position:absolute;
bottom:0;
margin:2em;
}
<div id="votingmeter"> 

<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>

</div>

(请参阅.votingindex)

但问题是 .votingindex 元素重叠。我希望在每个 div 元素之间应用一些空间。

谁能建议我一个方法吗?

此外,我希望黄色 div(.voteindex) 留在黑色 div (#votingmeter) 内。

最佳答案

用绝对位置将 .voteindex div 包裹在 div 中。

 #votingmeter {  width:25em;height:20em;background-color:black; position: relative; }

.voteindex { width:2em;height:8em;
background-color:yellow;float:left;
margin:2em;}
.bottom {
position:absolute;bottom:0;
}
<body>

<div id="votingmeter">
<div class="bottom">
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
</div>

</div>

</body>

关于html - 如何在绝对定位元素之间应用水平空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29713657/

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