尝试设置 css 面板，但在缩放时惨遭失败 :(

Question

我正在制作的页面在浏览器中位于 http://kamikazeproductions.net/tooth/kpbr0009.html，它看起来不错，仍然需要一些技巧...但是当我 reduce/resize 浏览器 window，或者如果我导航通过移动浏览器，2 个垂直面板重叠:( 我的想法是将其设置得有点像 https://www.limitedrungames.com/collections/neo-frontpage/products/streets-of-red-ps4，但该页面有 3000 行代码，而 css 对我来说主要是希腊语。所以我不知道它是怎么做到的。我怀念 html 3.0 lol

的日子

所以我的问题....我的想法是在顶部有一个水平居中的横幅面板，2 个垂直面板和一个在底部水平居中的面板。
1) 如前所述，垂直面板在调整大小时重叠，而不是动态缩放。无法弄清楚如何在 2 之间设置硬中断。
2）下面板比我想要的要低 WAAAYYY。我只想将面板降低到 2 个垂直面板下方的 2 或 3 行。有帮助吗？
3) 我不介意在左图像和 window 的左侧之间有大约 20px 的 space 左右...但这不是一个交易破坏者。我尝试了 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">.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">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>

Answer 1

您可以使用 bootstrap 和 css，例如 col-lg、col-md、col-xs 等等...为普通Manitor、平板电脑尺寸、手机尺寸等提供您的网页

您应该阅读以下内容link：

Meaning of numbers in "col-md-4"," col-xs-1", "col-lg-2" in Bootstrap

Answer 2

因为您的图片标签包含明确的比例声明，所以它不会随容器流动。

你可以

1.
设置网格系统（我在我的示例中使用弹性框，但您也可以使用真正的网格）并使用一些媒体查询将网格堆栈作为视口缩小时的列

<style>
section[role="container"]{
    display: flex;
    flex-direction: row;
}


section[role="container"] *{
    flex-grow: 1;
}

@media screen and (max-width: 500px){
    section[role="container"]{
    flex-direction: column;
    }
}
</style>
    <section role="container">
        <div class="left-pane">content</div>
        <div class="right-pane">content</div>
    </section>

使用百分比设置图像大小，以便图像填充容器并保持流畅。如果你想防止低于某个分辨率，你可以添加一个 max-width min-width。

尝试设置 css 面板，但在缩放时惨遭失败 :(

trying to set up css panels, and failing miserably with scaling :(

html

css

scaling

panel