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

【问题标题】：trying to set up css panels, and failing miserably with scaling :(尝试设置 css 面板，并在缩放时惨遭失败:(
【发布时间】：2020-05-11 08:47:24
【问题描述】：

我正在制作的页面位于浏览器中的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 个垂直面板下方降低面板 2 或 3 行。有什么帮助吗？
3）我不介意在左侧图像和窗口左侧之间有大约 20 像素的空间......但这不是一个交易破坏者。我尝试了 ol' &nbsp; 但它似乎没有做任何事情来增加间距。我只是想为明天做一个非常快速和肮脏的订单页面。谢谢！

<!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">
&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>

【问题讨论】：

标签： html css panel scaling

【解决方案1】：

您可以使用 col-lg、col-md、col-xs 等 bootstrap 和 css... 来提供您的网页的正常 Manitor、平板电脑尺寸、手机尺寸等

您应该阅读以下链接：

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

【讨论】：

【解决方案2】：

因为您的图像标签包含明确的比例声明，它不会与容器流动。

你可以

1.
设置一个网格系统（我在我的示例中使用 flex box，但您也可以使用真正的网格）并使用一些媒体查询将网格堆叠为一个列，因为视口缩小

<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 。

【讨论】：

选项 1 让它工作！现在我们在做生意。我真的只是蛮力强迫这件事，所以我进入 PS 并在图像的每一侧添加了更多的垫，以提供更多的间距。对大多数人来说并不理想，但它可以在紧要关头工作。感谢您的帮助！
太棒了！我再次检查了您的站点，发现它现在正在扩展，但是我建议您为各种断点设置多个 @media 块（即，在为电视、大显示器、小显示器、平板电脑、手机调整大小时）。然后我建议将列堆栈的最大宽度设置为具有明确比例的图像大小。（max-with : 无论你的图像宽度是多少）.. 这样就不会有任何溢出