gpt4 book ai didi

css - 尝试将 div 放置在按钮下方,但无法将其与按钮右侧对齐

转载 作者:行者123 更新时间:2023-11-28 02:31:39 25 4
gpt4 key购买 nike

我正在使用 React,我有一排按钮,其中一个按钮应该打开一个包含一些点击信息的 div。

不过,我在使用 CSS 时遇到了一些问题。这是一个示例 fiddle :https://jsfiddle.net/4ovxw4eg/1/

和片段:

.container {
display: flex;
flex-direction: row;
}

.openItem {
height: 200px;
width: 200px;
border: 1px solid black;
position: absolute;
right: 0;
}

.test {
position: relative;
}
<div class="container">
<button>
some button
</button>
<button>
some button
</button>
<button>
some button
</button>
<button>
some button
</button>
<button class="test">
The Button
</button>
</div>

<div class="openItem">
This should be below and to the right edge of The Button
</div>

我应该如何处理这个问题?我正在为按钮行使用 flexbox 。

我的 React 代码会检查 someProp 是否为 true,然后显示此框。 IE。 showPopup && renderPopup

最佳答案

将 div 移到按钮的容器 div 内,并使用 inline-flex 和相对位置。

.container {
display: inline-flex;
flex-direction: row;
position: relative;
}

.openItem {
height: 200px;
width: 200px;
border: 1px solid black;
position: absolute;
right: 0;
top: 40px;
}

.test {
position: relative;
}
<div class="container">
<button>
some button
</button>
<button>
some button
</button>
<button>
some button
</button>
<button>
some button
</button>
<button class="test">
The Button
</button>
<div class="openItem">
This should be below and to the right edge of The Button
</div>
</div>

关于css - 尝试将 div 放置在按钮下方,但无法将其与按钮右侧对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47663164/

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