如何调整两个HTML元素的位置？ [英] How can i adjust the positioning of two html elements?
问题描述
我正在尝试调整两个HTML元素的位置。我有一个HTML元素来显示 ASCII生成的文本。另一种是显示带有HREF链接的标签。我希望标签显示在已打印的 ASCII标签下方文本。但是，它旁边似乎正在打印，这不是我想要的。
I am trying to adjust the position of two HTML Elements. I have one HTML element to display the "ASCII" generated text. The other, to display an tag with a HREF link. I want the tag to be displayed underneath the printed "ASCII" text. However, it seems to be printing next to it, which isn't what I want.
我的HTML代码如下：
My HTML code is as follows:
*, *:before, *:after {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font: 16px "Helvetica Neue", Helvetica, sans-serif;
line-height: 1;
background-color: black;
}
.container {
overflow: hidden;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
.bypass {
text-align: center;
color: linear-gradient(to top, #e7343d 50%, #e7343d 50%);
color:transparent;
-webkit-background-clip: text;
background-clip: text;
align-items: center;
justify-content: center;
}
.rainbow {
background-image: linear-gradient(to top, #e7343d 50%, #61d6d6 50%);
color:transparent;
-webkit-background-clip: text;
background-clip: text;
}
.ascii {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Brrrrrr</title>
<link rel="stylesheet" href="./style.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
</style>
</head>
<body>
<div class="container rainbow">
<pre class="ascii ascii-0">
______ __ _
/ ____/_ ______ / /_ ____ _____(_)___ _
/ __/ / / / / __ \/ __ \/ __ \/ ___/ / __ `/
/ /___/ /_/ / /_/ / / / / /_/ / / / / /_/ /
/_____/\__,_/ .___/_/ /_/\____/_/ /_/\__,_/
/_/
</pre>
<div id="wrapper">
<div id="Content-container">
<nav class="bypass" id="main-nav"></nav>
</nav>
<nav id="social-media-nav">
<ul>
<li>
<a id="bypass" class="bypass" href="https://google.com/">Home</a>
</li>
</ul>
</nav>
</div>
</div>
<pre>
</pre>
<pre id="text"></pre>
</div>src="script.js"><!-- partial -->
<script src="./script.js"></script>
</body>
</html>
推荐答案
您可以使用以下代码在下一行上打印文本
you can use the following code to print your text on next line
删除此代码
.ascii {
display: none;
}
添加此代码
.rainbow { flex-flow: row wrap; }
添加两个元素之间的新div
<pre class="ascii ascii-0">..</pre>
<div class="break"></div>
<div id="wrapper">..<div>
将CSS添加到新的div
.break {
flex-basis: 100%;
width: 0px;
height: 0px;
overflow: hidden;
}
更新
由于我在项目中附加了js文件，因此可以通过以下步骤解决此问题
Update
since I got the js file attached in the project, this can be resolved with following steps
步骤1：
将id = text的div向上移动并添加class的div .break
step 1: move the div with id = text up and add a div with class .break
<pre class="ascii ascii-0">...</pre>
<pre id="text">...</pre>
<div class="break">...</div>
<div id="wrapper">...</div>
步骤2：
如上所述，添加.break类并将代码添加到.rainbow类。
请勿删除
step 2: Add the .break class and add code to .rainbow class as above. Do not remove
.ascii { display: none }
这篇关于如何调整两个HTML元素的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
