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

问题描述

我正在制作的页面位于浏览器中的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' 但它似乎没有做任何事情来增加间距。我只是想为明天做一个非常快速和肮脏的订单页面。谢谢！

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

标签： htmlcsspanelscaling

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

问题描述

解决方案

推荐阅读