gpt4 book ai didi

javascript - 将一个 div 中的元素置于另一个 div 中的元素之上

转载 作者:太空宇宙 更新时间:2023-11-04 13:07:35 24 4
gpt4 key购买 nike

我试图在 6 个图标上方放置一行 6 个文本,以便第一个文本显示在第一个图标上方,第二个文本显示在第二个图标上方,等等。我无法发布图片,因为我是新来的.

这是 HTML:

 <div id="forecast">
<!-- Naming convention starts with today as Sunday, because reasons -->
<div id="names" class="row">
<div id="mon" class="col-md-2"> Mon </div>
<div id="tues" class="col-md-2"> Tues </div>
<div id="wed" class="col-md-2"> Wed </div>
<div id="thur" class="col-md-2"> Thur </div>
<div id="fri" class="col-md-2"> Fri </div>
<div id="sat" class="col-md-2"> Sat </div>
</div>
<!-- End of names -->

<div id="forecast-icons" class="row">
<div id="mon-icon" class="col-md-2"> </div>
<div id="tues-icon" class="col-md-2"> </div>
<div id="wed-icon" class="col-md-2"> </div>
<div id="thur-icon" class="col-md-2"> </div>
<div id="fri-icon" class="col-md-2"> </div>
<div id="sat-icon" class="col-md-2"> </div>

</div>
<!-- forecast icons -->

Bootstrap 不会影响图标,我不确定为什么。为了抵消这一点,我尝试添加 padding-left: 在百分比和原始数字中,但这些都不起作用。我可以做原始数字,但这需要大量的断点。

我也试过:#names, #forecast-icons{ display: flex; flex 方向:行;证明内容:居中;

但是图标都集中在中间。

这是 codepen 的链接(我知道这里的人喜欢 jsfiddle,抱歉):https://codepen.io/CrumrineCoder/pen/EyLmoZ?editors=1100

这是完整的页面 View :

https://codepen.io/CrumrineCoder/pen/EyLmoZ?editors=1100

我通过应用 display: inline 将它们全部排成一行。

最佳答案

您可以尝试将您的预测名称和图标放在表格中,这应该使它们在彼此下方稍微正确对齐您仍然可以将类或 ID 添加到表格行以使文本和图标更适本地居中

 <table>
<tr bgcolor="#FF0000">
<th>Mon</th>
<th>T</th>
</tr>
<tr>
<td>icon</td>
<td>icon</td>
</tr>
</table>

关于javascript - 将一个 div 中的元素置于另一个 div 中的元素之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38551801/

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