我正在浏览器中的页面位于http://kamikazeproductions.net/tooth/kpbr0009.html，它看起来还不错，仍然需要一些技巧...但是当我缩小/调整浏览器窗口的大小，或者如果我通过移动浏览器导航时，两个垂直面板会重叠:(想法是像https://www.limitedrungames.com/collections/neo-frontpage/products/streets-of-red-ps4那样进行设置，但是该页面有3000行代码，而CSS对我来说大多是希腊文。所以我不知道它是如何完成的。我想念html 3.0的日子哈哈
所以我的问题...。这个想法是在顶部有一个水平居中的横幅面板，在底部有2个垂直面板，并在底部有一个水平居中的面板。1）如前所述，垂直面板在调整大小时会重叠，而不是动态缩放。无法弄清楚如何在2之间设置硬性中断。2）下面板比我想要的低WAAAYYY。我只想将面板2或3行降低到2个垂直面板下方。有什么帮助吗？3）我不介意左侧图像和窗口左侧之间有大约20px左右的空间...但这不是一个大问题。我尝试了OL' ，但它似乎没有做任何事情来增加间距。我只是想为明天做一个非常快速和肮脏的订单页面。谢谢！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tooth And Nail VHS Collection Blu-Ray</title>
<style>
body {
background-image: url("http://www.kamikazeproductions.net/tooth/bg.jpg");
}
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.leftpane {
width: 25%;
height: 100%;
float: left;
border-collapse: collapse;
}
.rightpane {
width: 75%;
height: 100%;
position: relative;
float: right;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="container">
<div class="toppane">
<center><img src="http://www.kamikazeproductions.net/tooth/banner.png" height="229" width="630"></center><br><br>
</div>
<div class="leftpane">
<br><br><br><IMG SRC="http://www.kamikazeproductions.net/tooth/package.png" height="504" width="420" ALIGN="left" />
</div>
<div class="rightpane">
<p><b><font size="5">$23.00, postage included!</b></font>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="NR2DBYM5SJESS">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form><br>
<font size="4">blah blah blah<br>
<br clear="all">
</div>
<div class="bottompane">
<p><center><font size="5">blah blah blah</font><br><br><iframe width="560" height="315" src="https://www.youtube.com/embed/LAZKY45-PYM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br><br><br><br><br> (c) 2020 Kamikaze Productions</center>
</p>
</div>
</div>
</body>
</html>
我正在制作的页面位于http://kamikazeproductions.net/tooth/kpbr0009.html，在浏览器中看起来还可以，仍然需要一些技巧...但是当我缩小/调整浏览器窗口的大小，或者如果我通过...
因为您的图片标签包含明确的比率声明，所以对于容器来说不会太流畅。
您可以使用引导程序和CSS，例如col-lg