我试着做一个VN，我试着做一个浮动，因为我需要文本进入两个图像之间，但我认为这会导致按钮在出现时稍微向右移动. 我不断地看到其他方法的推荐，比如Display:Flex；但我似乎不能在这种情况下使用它.
document.addEventListener("DOMContentLoaded", () => {
let index = 1;
const button = document.querySelector('button');
const sections = document.querySelectorAll('section');
button.addEventListener('click', function() {
if (sections[index]) {
if (hasImg(index) && hasImg(index - 1)) {
sections[index - 1].classList.remove("d-block");
}
sections[index].classList.add("d-block");
typeWriter(sections[index]);
}
if (!sections[++index]) {
button.disabled = true;
}
});
function hasImg(index) {
return sections[index].querySelector('img');
}
typeWriter(sections[0]);
});
function typeWriter(el) {
const content = el.innerHTML;
el.innerHTML = '';
let i = 0;
const typeInterval = setInterval(() => {
if (content[i] === '<' && content[i + 1] === 'i' && content[i + 2] === 'm' && content[i + 3] === 'g') {
let endIdx = content.indexOf('>', i) + 1;
el.innerHTML += content.substring(i, endIdx);
i = endIdx;
} else {
el.innerHTML += content[i];
i++;
}
if (i >= content.length) {
clearInterval(typeInterval);
}
}, 95);
}section {
display: none;
text-align: center;
}
.d-block {
display: block;
}
button {
margin: 0 auto;
display: block;
}
.portrait {
animation: fadeIn 5s;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.happy {
float: left;
}
.sad {
float: right;
}<section class="text d-block">First</section>
<section class="text">Second</section>
<section class="text">
<img class="portrait happy" src="https://cdn.iconscout.com/icon/premium/png-256-thumb/arrow-small-right-4241483-3517873.png">
<img class="portrait sad" src="https://cdn.iconscout.com/icon/free/png-256/free-small-diamond-geometric-blue-38006.png">
</section>
<section>Las</section>
<section>Ursa</section>
<button>next</button>