javascript - 使类元素固定到具有响应性的位置
问题描述
我有下面的代码,它在具有响应性的名称板上准确显示了九个框。
我有班级numberdisplay,我想在交接板上显示数字。
My problem is the the numberdisplayeddidn't displayed in hanging board is not responsive and fixed.
when window resizes the size an alignment changes.
我希望显示的数字固定在挂板内,并且应该有响应。
如何做到这一点以及如何实现这一点?
.box {
width: calc(33.3% - 4px);
display: inline-block;
border-radius: 5px;
border: 2px solid #333;
border: #000 border-color: #e6e600;
margin: -2px;
border-radius: 10%;
background-color: #99ffff;
}
.numberdisplay {
margin-left:73.99%;
margin-top:20%;
margin-bottom:100%;
background-color:#ffff00 2px;
border:px solid #000066;
}
.containerr {
border: px solid #FF3399;
}
.pic {
background-size: 100% 100%;
}
p {
font: "Courier New", Courier, monospace;
color: #000000;
text-align: center;
}
body {
background-image: url(https://image.ibb.co/eV5WW9/background.jpg);
background-size: 100vw 100vh;
}
.box {
height: 15vh;
display: inline-flex;
align-items: center;
justify-content: center
}
.container2 {
width: 35vw;
position: fixed;
top: 41.5vh;
left: 14vw;
}
.box p {
font-size: calc(2vw + 10px);
}
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box" id="10">
<p name="values" data-item-index="0">1:40</p>
</div>
<div class="box" id="11">
<p name="values" data-item-index="7">8:10</p>
</div>
<div class="box" id="12">
<p name="values" data-item-index="4">5:35</p>
</div>
</div>
<div id="2container">
<div class="box" id="10">
<p name="values" data-item-index="11">12:50</p>
</div>
<div class="box" id="11" >
<p name="values" data-item-index="9" >10:40</p>
</div>
<div class="box" id="12" >
<p name="values" data-item-index="11" >12:50</p>
</div>
</div>
<div id="3container">
<div class="box" id="10" >
<p name="values" data-item-index="0" >1:40</p>
</div>
<div class="box" id="11" >
<p name="values" data-item-index="3" >4:45</p>
</div>
<div class="box" id="12" >
<p name="values" data-item-index="2">3:50</p>
</div>
</div>
</div>
</div>
</div>
<div class="numberdisplay" id="2">
<img src="https://via.placeholder.com/75x75?text=11" style="width:160px; height:160px; border-radius: 50%;" border="rounded"/>
</div>
解决方案
更好的选择是没有一个完整的背景图像,而是将一个<div>
以棋盘作为背景图像的元素。
所以你不会有这些问题,因为你想根据整个页面背景图像调整元素的大小。在这种情况下,这不是最好的解决方案。
编辑类似tis的东西:
.container {
width: 100vw;
height: 100vh;
background: #AFFFDC;
}
.board {
display: flex;
/* replace me with the board .png image. Take also a look at the background: cover; property etc. to adjust the image size for different screens */
background: #B1C296;
/* I need the size of the board */
width: 300px;
height: 200px;
/* just for demo to show the container */
padding: 10px;
}
.board--table {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
}
.board--time {
width: calc(33.33% - 4px);
align-items: center;
justify-content: center;
display: flex;
border-radius: 10%;
background-color: #99ffff;
border: 2px solid #333;
}
<div class="container">
<div class="board">
<div class="board--table">
<div class="board--time"><span>1:40</span></div>
<div class="board--time"><span>1:40</span></div>
<div class="board--time"><span>1:40</span></div>
<div class="board--time"><span>1:40</span></div>
<div class="board--time"><span>1:40</span></div>
<div class="board--time"><span>1:40</span></div>
<div class="board--time"><span>1:40</span></div>
<div class="board--time"><span>1:40</span></div>
<div class="board--time"><span>1:40</span></div>
</div>
</div>
</div>
推荐阅读
- html - 下拉导航菜单出现在右侧并水平堆叠
- opencv - 我正在尝试编写一个 python 代码来使用 OpenCV 从输入图像中获取透视图。如何摆脱这个错误?
- r - 在 R 中使用手动图例需要帮助
- python - 将数据写入从网站抓取的 CSV 时出现 Python 错误
- python - 在组 Matplotlib 图中标记并使用正确颜色的图例
- numpy - 将 Fortran 数组转换为 numpy 数组
- javascript - 赠品命令不保存(Heroku)discord.js
- python - 是否无法在 web.archive “包含”网页中使用 Selenium (Python),还是我做错了什么?
- r - 在 R 中使用 xpath 抓取数据表
- c++ - 表达式必须有一个常数值 VS 2019