javascript - 将调用的块相对于父块 JS 居中
问题描述
有一个块,当您单击 + 时,会在其侧面调用相同的块。这些块由一条线连接,当再次按下时,另一个块被调用。下面是图表和我的代码。问题:如何使新块(图中绿色块)相对于父块(图中红色块)居中,而不考虑父块的位置,如图所示?
let distance = 250;
let count = 0;
document.body.addEventListener("click", function (e) {
if (e.target.classList.contains("btn")) {
let div = document.createElement("div"),
father = e.path[5];
count = count + 100;
div.classList = father.classList;
div.style.left = father.offsetLeft + distance + "px";
div.style.top = father.offsetTop + count + "px";
let arrow_width = distance - father.offsetWidth;
div.innerHTML =
father.innerHTML +
`<div class='arrow' style='left: ${-arrow_width}px;width:${arrow_width}px;'><div></div></div>`;
document.body.append(div);
}
});
html {
font-family: FuturaMediumC;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
display: block;
}
body {
margin: 0;
font-family: FuturaMediumC;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background: #f5f7fa;
}
html,
body {
scrollbar-color: red #1a1a1a;
scrollbar-width: thin;
}
.center {
margin: 0;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
}
body .card {
position: relative;
height: 12rem;
width: 10%;
min-width: 200px;
box-shadow: 0 0 2rem -1rem rgba(0, 0, 0, 0.05);
display: inline-block;
z-index: 99999999 !important;
}
body .card .multi-button {
z-index: 0;
position: absolute;
top: 1.25rem;
left: 1.25rem;
border-radius: 100%;
width: 0rem;
height: 0rem;
transform: translate(-50%, -50%);
transition: 0.25s cubic-bezier(0.25, 0, 0, 1);
}
body .card .multi-button button {
display: grid;
place-items: center;
position: absolute;
width: 2rem;
height: 2rem;
border: none;
border-radius: 100%;
background: #000;
color: #fff;
transform: translate(-50%, -50%);
cursor: pointer;
transition: 0.25s cubic-bezier(0.25, 0, 0, 1);
box-shadow: 0 0 0rem -0.25rem var(--background);
}
body .card .multi-button button:hover {
background: var(--text);
color: var(--background);
box-shadow: 0 0 1rem -0.25rem var(--background);
}
body .card .multi-button button:first-child:nth-last-child(1):nth-child(1),
body .card .multi-button button:first-child:nth-last-child(1) ~ *:nth-child(1) {
left: 25%;
top: 25%;
}
body .card .multi-button button:first-child:nth-last-child(2):nth-child(1),
body .card .multi-button button:first-child:nth-last-child(2) ~ *:nth-child(1) {
left: 37.5%;
top: 18.75%;
}
body .card .multi-button button:first-child:nth-last-child(2):nth-child(2),
body .card .multi-button button:first-child:nth-last-child(2) ~ *:nth-child(2) {
left: 18.75%;
top: 37.5%;
}
body .card .multi-button button:first-child:nth-last-child(3):nth-child(1),
body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(1) {
left: 50%;
top: 15.625%;
}
body .card .multi-button button:first-child:nth-last-child(3):nth-child(2),
body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(2) {
left: 25%;
top: 25%;
}
body .card .multi-button button:first-child:nth-last-child(3):nth-child(3),
body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(3) {
left: 15.625%;
top: 50%;
}
body .card .multi-button button:first-child:nth-last-child(4):nth-child(1),
body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(1) {
left: 62.5%;
top: 18.75%;
}
body .card .multi-button button:first-child:nth-last-child(4):nth-child(2),
body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(2) {
left: 37.5%;
top: 18.75%;
}
body .card .multi-button button:first-child:nth-last-child(4):nth-child(3),
body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(3) {
left: 18.75%;
top: 37.5%;
}
body .card .multi-button button:first-child:nth-last-child(4):nth-child(4),
body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(4) {
left: 18.75%;
top: 62.5%;
}
body .card .cardcontainer {
position: absolute;
width: 100%;
height: 100%;
border-radius: 1rem;
background: var(--background);
color: var(--text);
}
body .card:hover .multi-button,
body .card .multi-button:focus-within {
width: 10rem;
height: 10rem;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #1a1a1a;
}
::-webkit-scrollbar-thumb {
background-color: #000;
border-radius: 1em;
box-shadow: inset 1px 1px 10px #f3faf7;
}
::-webkit-scrollbar-thumb:hover {
background-color: #000;
}
::-webkit-scrollbar-button:vertical:start:decrement {
background-color: #000;
}
::-webkit-scrollbar-button:vertical:end:increment {
background-color: #000;
}
::-webkit-scrollbar-button:horizontal:start:decrement {
background-color: #000;
}
::-webkit-scrollbar-button:horizontal:end:increment {
background-color: #000;
}
.invisible {
display: none !important;
}
.schema {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.optionsmenu {
bottom: 0;
width: 100%;
height: 25%;
background: #000;
position: absolute;
}
.optionsmenu textarea {
color: #000;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10 {
position: absolute;
}
.col-1-2,
.col-2-3,
.col-3-4,
.col-4-5,
.col-5-6,
.col-6-7,
.col-7-8,
.col-8-9,
.col-9-10 {
position: absolute;
}
.schema2 {
display: none;
}
.blue {
--background: #3f72c3;
--text: white;
}
.purple {
--background: #743da0;
--text: white;
}
.white {
--background: #e3e8e6;
--text: black;
}
.arguments {
z-index: 9999999999;
position: absolute;
width: 100%;
height: 80%;
bottom: 0;
background: transparent;
color: white;
font-weight: bolder;
letter-spacing: 2;
}
#in-kod {
width: 0px;
height: 0px;
}
.add {
z-index: 99999999 !important;
}
.btn {
z-index: 99999999 !important;
position: absolute;
width: 25%;
bottom: 0;
}
.btn2 {
z-index: 99999999 !important;
position: absolute;
width: 25%;
bottom: 0;
left: 50%;
}
.btn3 {
z-index: 99999999 !important;
position: absolute;
width: 25%;
bottom: 0;
right: 0;
}
.in-kod {
display: block;
}
.arrow {
position: absolute;
top: 50%;
height: 2px;
background: #000;
}
<div class='col-6' style="top:50px;left:50px;">
<span class="in-kod">
<div class="card purple">
<div class="multi-button">
<span class="add">
<button class="btn">+</button>
</span>
</div>
<div class="cardcontainer">
<textarea class="arguments"></textarea>
</div>
</div>
</span>
</div>
解决方案
这是使用 CSS Grid 的一种可能的解决方案。
我将父母和孩子放入单独的容器中,并将它们包装在一个网格中。然后居中对齐网格项目。这确保无论子块中有多少项目,它始终与父块居中对齐。
试一试。单击任何孩子以添加另一个孩子并亲自查看。
注意:jQuery 仅用于使其具有交互性。实际的 CSS 解决方案不需要任何 JS。
const children = $(".child");
children.on("click", () => {
$(".children").append("<div class='child'>Child</div>");
})
* {
font-family: sans-serif;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
.parent, .child {
min-height: 2rem;
padding: 0.25rem;
color: white;
}
.parent {
background: red;
}
.child {
background: green;
cursor: pointer;
}
.child + .child {
margin-top: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="parent">
Parent
</div>
<div class="children">
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
</div>
</div>
推荐阅读
- reactjs - babel JS 文件无法解析“@babel/runtime/helpers/builtin/classCallCheck”
- testing - 使用来自请求的动态负载测试 redux saga
- jenkins - Apache Ivy:“条件不支持嵌套的“javaversion”元素。”错误
- machine-learning - 机器学习/NLP 文本分类:从文本文件的语料库中训练模型 - scikit learn
- html - 重置css中的伪类更改
- xml - 如果行跨度出现在 xslt 中,则无法处理下一个 tr 的宽度
- asp.net - Ajax 文件上传处理程序在请求时始终为零
- javascript - 如何在 React 中使用自动完成
- mysql - 命令行 MySQL 查询导出输出到文件在 Windows 中不起作用
- laravel - 数组计数 - Laravel