我的网站的右侧和中间看起来很正常，但左侧下拉了。有人可以帮我解决这个问题吗？请全屏显示代码段。盒子太小了，装满了。如果有人有解决方案或建议，请告诉我。我的网站是纯HTML顺便说一句。请注意，您可能会看到一些音频错误。在我的实际网站上，我有音乐和东西。
<html>
<!-- WEBSITE -->
<title> Auron's website </title>
<style>
#container {
display: flex;
}
#center {
margin: auto;
}
/* Remaining CSS is identical to original */
#p12 {
display: flex;
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
margin: 0 auto;
letter-spacing: 2px;
animation: typing 1.3s steps(20, end), blink-caret .75s steps(50, end) infinite;
}
#p12 {
display: inline-flex;
}
/* The typing effect */
@keyframes typing {
from {
width: 0
}
to {
width: 100%
}
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: orange;
}
}
audio {
display: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid darkred;
margin: 1em 0;
padding: 0;
}
.test {
width: 11em;
border: 1px solid blue;
word-wrap: break-word;
position: absolute;
right: 0px;
}
</style>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<body style="background-color:silver;">
<audio controls volume="0.6" preload="auto" autoplay id="audio1" loop>
<source src="kde.mp3" type="audio/mpeg">
Your browser does not support this audio file.
</audio>
<span style="float:right;">
<head>
<!-- INSERT JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var ampm = h >= 12 ? 'PM' : 'AM';
h = h % 12;
h = h ? h : 12; // the hour '0' should be '12'
m = checkTime(m);
s = checkTime(s);
document.getElementById("txt").style.color = "darkred";
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s + " " + ampm;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
var myAudio = document.getElementById("audio1");
function playPause() {
if (myAudio.paused)
myAudio.play();
else
myAudio.pause();
}
</script>
<!-- JQUERY CODE -->
<script>
$(document).ready(function(){
$("#test").click(function(){
$("#test").fadeOut(1000);
});
});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-1488256319567534",
enable_page_level_ads: true
});
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</span>
<div id="container">
<div id="center">
<p id="p12" style="color:red;font-size:20px">
<b>Welcome to my website!</b>
</p>
</div>
</div>
<center>
<p style="color:blue">Hello, This my website. If you look at the code it's all wacky! Probably because i'm to lasy to organize it. Or just because i'm happy it works. Anyway, at-least the code runs correctly! Just so you know this was run on chrome. So if the website has
random code on screen then that means it doesn't support your browser. Well, Bye! </p>
</center>
<!-- BORDER -->
<hr color:darkred>
<!-- BORDER -->
<!-- COLOR FOR TEXT DO NOT CHANGE -->
<span style="color:darkred">
<P align=right style="margin-right: 140px;" class="update" id="hide"> Update List: </P>
<!-- UPDATE LIST -->
<span> <ul style="margin-right: 10px;" class="update test" id="hide">
<li> 1.0 Website released! </li>
<li> 1.1 Click copyright to hide. </li>
<li> 1.2 Welcome sound added. </li>
<li> 1.3 24 hour clock is now
a 12 hour clock. </li>
<li> 1.4 Website music! </li>
<li> 1.5 Added pause/play button. </li>
<li> 1.6 Ads </li>
<li> 1.7 Added some animation!</li>
</ul> </span>
<!-- ACTUAL TEXT! -->
<p align="center">
If you find a bug or have a suggestion, click here: </p>
<p align=middle> <a href=captcha.html>Email Link</a>
</p>
<!-- MAIN TEXT -->
<i> I use KDE Neon
<a href="https://neon.kde.org/">for my OS. </a> </i>
<p> Click the link if you want to try it out! </p>
<p>
My Desktop is a <b>Custom Dell Inspiron 3656</b> SPECS:
</p>
<ul>
<li>CPU: AMD A10-8700P 1.8 GHZ 4-core</li>
<li>RAM: 12 GB DDR3</li>
<li>HDD: 930 GB</li>
<li>OS: Windows 10 Professional 64-bit</li>
<li>SCREEN: 1920 X 1080</li>
</ul>
<p> Donate to KDE Neon or ReactOS! </p>
<ul>
<li> <a href="https://www.reactos.org/donating">ReactOS </a> </li>
<li> <a href="https://www.kde.org/community/donations/">KDE Neon </a> </li>
</ul>
<p> Wanna try the OS before installing it? Try <a href="https://www.virtualbox.org/wiki/Downloads">VirtualBox! </a> </p>
<p> My Youtube and Twitch channels!
<ul>
<li><a href="https://www.youtube.com/channel/UCMF9lXrFi9k4A1EHRKc3-fw">Youtube </a> </li>
<li><a href="https://www.twitch.tv/mrmajik45">Twitch </a>
</li>
</ul>
<!-- COPYRIGHT -->
<p style="font-size:12px; position: fixed; bottom: 0; width:100%; text-align: center" id="test"> Auron's website © </p>
<button style="position: fixed; bottom: 0;" onclick="playPause()">Play/Pause</button>
<form style="position: fixed; bottom: 0; left: auto; right: 0; top: auto" action="calc.html">
<input type="submit" value="Calculator" />
</form>
<!-- END OF CODE -->
</body>
</html>
答案 0 :(得分：0)
这真是一团糟。这是因为您没有定义任何宽度或将该部分浮动到左侧。如果您想一直将某些东西移到最左边而又没有任何干扰，那么您可以将其放在代码的最前面，并使其以定义的宽度向左浮动。
答案 1 :(得分：0)
您需要做的是划分不同的部分。这是一个非常基本的示例，但可以满足您的情况。现在，您可以将内容放置在.main__[position]区域内。我没有任何断点，这取决于您如何喜欢它们。如果您不喜欢这种方法（BEM），则可以重命名。
body {
background-color: aqua;
}
.header {
padding: 2rem;
background-color: lightgray;
}
.main {
display: flex;
flex-direction: row;
}
.main__left {
flex-basis: 1;
flex-shrink: 0;
flex-grow: 1;
padding: 2rem;
background-color: deepskyblue;
}
.main__middle {
flex-basis: 2;
flex-shrink: 0;
flex-grow: 1;
padding: 2rem;
background-color: white;
}
.main__right {
flex-basis: 1;
flex-shrink: 0;
flex-grow: 1;
padding: 2rem;
background-color: deepskyblue;
}
.footer {
padding: 2rem;
background-color: coral;
}<header class="header">
My header
</header>
<main class="main">
<div class="main__left">left</div>
<div class="main__middle">middle</div>
<div class="main__right">right</div>
</main>
<footer class="footer">
My footer
</footer>