我正在嘗試插入一堆不在流程之外但與內(nèi)聯(lián)元素垂直對(duì)齊的元素。這是我想要實(shí)現(xiàn)的結(jié)果（是的，它很丑陋，但希望它有助于解決問題）。HTML 以一堆<span>bigger</span>元素開始。每個(gè)<span>HTML 模板中都會(huì)插入一個(gè)紅色箭頭 (?)。我希望紅色箭頭垂直對(duì)齊到 的中間<span>?！案蟆本哂袃煞N顏色背景的原因是為了清楚垂直中間在哪里。箭頭需要與中間垂直對(duì)齊。下面是迄今為止不起作用的代碼。為了實(shí)現(xiàn)我的目標(biāo)，我只能更改下面的 CSS/* only change css below this line */和<template>HTML。重點(diǎn)是我無法針對(duì)每種情況對(duì)高度進(jìn)行硬編碼。溶液必須是流體。PS：我不在乎“和”。我只關(guān)心箭頭指向其相應(yīng)“更大”的中間/* do not change any JavaScript */const template = document.querySelector('#arrow');document.querySelectorAll('span').forEach(elem => { const child = template.content.cloneNode(true).children[0]; elem.appendChild(child);});.f1 { font-size: 10pt; }.f2 { font-size: 15pt; }.f3 { font-size: 25pt; }.f4 { font-size: 30pt; }.f5 { font-size: 35pt; }.f6 { font-size: 40pt; }.f7 { font-size: 45pt; }.f8 { font-size: 50pt; }.f9 { font-size: 55pt; }.f10 { font-size: 60pt; }.f11 { font-size: 65pt; }.f12 { font-size: 70pt; }/* only change css below this line */.f { background: linear-gradient(#e66465 50%, #9198e5 50%); display: inline-block; position: relative;}.arrow { position: absolute; right: 0; top: 0; display: inline-block;}.arrow>div:before { content: 'f'; color: rgba(0,0,0,0);}.arrow>div { position: absolute; left: 0; top: 0;}.arrow>div>div { position: absolute; bottom: 0; color: rgba(255, 0, 0, 0.5); font-size: 20pt;}<p>Alice drank the potion and she got <span class="f f1">bigger</span> and <span class="f f2">bigger</span> and <span class="f f3">bigger</span> and <span class="f f4">bigger</span> and <span class="f f5">bigger</span> and <span class="f f6">bigger</span> and <span class="f f7">bigger</span> and <span class="f f8">bigger</span> and <span class="f f9">bigger</span> and <span class="f f10">bigger</span> and <span class="f f11">bigger</span> and <span class="f f12">bigger</span> and </p><!-- only change html below this line --><template id="arrow"> <div class="arrow"> <div> <div>?</div> </div> </div></template>
2 回答
胡子哥哥
TA貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超6個(gè)贊
這是我的結(jié)果
通過添加另一個(gè)可以是任何東西的盒子，在本例中<a>我能夠創(chuàng)建一個(gè)彈性盒子。
const template = document.querySelector('#arrow');
document.querySelectorAll('span').forEach(elem => {
const child = template.content.cloneNode(true).children[0];
elem.appendChild(child);
});
.f1 { font-size: 10pt; }
.f2 { font-size: 15pt; }
.f3 { font-size: 25pt; }
.f4 { font-size: 30pt; }
.f5 { font-size: 35pt; }
.f6 { font-size: 40pt; }
.f7 { font-size: 45pt; }
.f8 { font-size: 50pt; }
.f9 { font-size: 55pt; }
.f10 { font-size: 60pt; }
.f11 { font-size: 65pt; }
.f12 { font-size: 70pt; }
/* only change css below this line */
.f {
background: linear-gradient(#e66465 50%, #9198e5 50%);
display: inline-block;
position: relative;
}
.arrow {
position: absolute;
right: 0;
top: 0;
display: inline-block;
}
.arrow>div:before {
content: 'f';
color: rgba(0,0,0,0);
}
.arrow>div {
position: absolute;
left: 0;
top: 0;
}
.arrow>div>div {
position: absolute;
bottom: 0;
color: rgba(255, 0, 0, 0.5);
font-size: 20pt;
}
/*------------------Only added css bellow---------------------*/
.arrow div div{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
<p>
Alice drank the potion and she got
<span class="f f1">bigger</span> and
<span class="f f2">bigger</span> and
<span class="f f3">bigger</span> and
<span class="f f4">bigger</span> and
<span class="f f5">bigger</span> and
<span class="f f6">bigger</span> and
<span class="f f7">bigger</span> and
<span class="f f8">bigger</span> and
<span class="f f9">bigger</span> and
<span class="f f10">bigger</span> and
<span class="f f11">bigger</span> and
<span class="f f12">bigger</span> and
</p>
<!-- only change html below this line -->
<template id="arrow">
<div class="arrow">
<div>
<div><a>?</a></div>
</div>
</div>
</template>
唯一添加的CSS
.arrow div div{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
慕村225694
TA貢獻(xiàn)1880條經(jīng)驗(yàn) 獲得超4個(gè)贊
我會(huì)跳過 javascript 和.arrowelements 并使用 CSS 偽元素。
.f::after {
content: "?";
color: rgba(255, 0, 0, 0.5);
font-size: 20pt;
position: absolute;
display: inline-block;
right: -22pt;
top: 50%;
transform: translateY(-50%);
}
我使用絕對(duì)位置來確保文檔流不受影響。我將元素向右拉，使其不重疊，然后將top: 50%; transform: translateY(-50%)其垂直居中（頂部相對(duì)于包含.f元素，平移相對(duì)于偽元素的大小）。
/* do not change any JavaScript */
const template = document.querySelector('#arrow');
document.querySelectorAll('span').forEach(elem => {
const child = template.content.cloneNode(true).children[0];
elem.appendChild(child);
});
.f1 { font-size: 10pt; }
.f2 { font-size: 15pt; }
.f3 { font-size: 25pt; }
.f4 { font-size: 30pt; }
.f5 { font-size: 35pt; }
.f6 { font-size: 40pt; }
.f7 { font-size: 45pt; }
.f8 { font-size: 50pt; }
.f9 { font-size: 55pt; }
.f10 { font-size: 60pt; }
.f11 { font-size: 65pt; }
.f12 { font-size: 70pt; }
/* only change css below this line */
.f {
background: linear-gradient(#e66465 50%, #9198e5 50%);
display: inline-block;
position: relative;
}
.f::after {
content: "?";
color: rgba(255, 0, 0, 0.5);
font-size: 20pt;
position: absolute;
display: inline-block;
right: 0;
top: 50%;
padding-left: 2px;
transform: translateX(100%) translateY(-50%);
}
<p>
Alice drank the potion and she got
<span class="f f1">bigger</span> and
<span class="f f2">bigger</span> and
<span class="f f3">bigger</span> and
<span class="f f4">bigger</span> and
<span class="f f5">bigger</span> and
<span class="f f6">bigger</span> and
<span class="f f7">bigger</span> and
<span class="f f8">bigger</span> and
<span class="f f9">bigger</span> and
<span class="f f10">bigger</span> and
<span class="f f11">bigger</span> and
<span class="f f12">bigger</span> and
</p>
<!-- only change html below this line -->
<template id="arrow">
<div />
</template>
- 2 回答
- 0 關(guān)注
- 150 瀏覽
添加回答
舉報(bào)
0/150
提交
取消