пытаюсь настроить css панели и с треском проваливаюсь неудачно :( - PullRequest
Новая
       5

пытаюсь настроить css панели и с треском проваливаюсь неудачно :(

2 голосов
/ 25 января 2020

страница, которую я создаю, находится на http://kamikazeproductions.net/tooth/kpbr0009.html в браузере, она выглядит нормально, все еще нуждается в некоторой подделке ... но когда я уменьшаю / изменяю размер окна браузера, или если я перемещаюсь через мобильный браузер, 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 или 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">
&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>

Ответы [ 2 ]

1 голос
/ 25 января 2020

Вы можете использовать bootstrap и css как col-lg , col-md , col-xs и так далее ... для укажите веб-страницу для обычного менеджера, размера планшета, размера мобильного телефона и т. д. c

Вы должны прочитать ссылку ниже:

Значение чисел в "col-md-4", "col-xs-1", "col-lg-2" в Bootstrap

0 голосов
/ 25 января 2020

Поскольку тэг изображения содержит явные объявления отношений, он не будет изменяться с контейнерами.

Вы можете либо

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>
установите размер изображения в процентах, чтобы изображение заполняло контейнер и оставалось текучим. Вы можете добавить максимальную ширину и минимальную ширину, если вы хотите предотвратить падение ниже определенного разрешения.
...