Я создаю веб-сайт для клиента по производству комиксов. Для панелей есть пять делений:
- Правый квадрат
- Левый квадрат
- Прямо высокий (двойной рост)
- Слева высокий (двойной рост)
- Двойная ширина
Я пытаюсь найти решение, чтобы научить их ловить рыбу, а не давать им рыбу.
Вот моя проблема:
index.html
Если вы перейдете к нижней части div «template» (с комиксами), вы увидите, что нижний набор не верен. Он должен отражать второй сет, поэтому вместо высокого квадрата слева и двух квадратов справа я хочу два квадрата слева и высокий справа. Я попробовал пару вещей безрезультатно. Вот что я получил в коде:
CSS:
.panel_square_l
{
position:relative;
float:left;
width:350px;
height:350px;
border: 1px solid black;
margin:5px 5px 5px 0;
clear:none;
}
.panel_square_r
{
position:relative;
float:left;
width:350px;
height:350px;
border: 1px solid black;
margin:5px 0 5px 5px;
clear:none;
}
.panel_wide
{
position:relative;
float:left;
width:712px;
height:350px;
border: 1px solid black;
margin:5px 0 5px 0;
clear:none;
}
.panel_tall_l
{
position:relative;
float:left;
width:350px;
height:712px;
border: 1px solid black;
margin:5px 5px 5px 0;
clear:none;
}
.panel_tall_r
{
position:relative;
float:left;
width:350px;
height:712px;
border: 1px solid black;
margin:5px 0 5px 5px;
clear:none;
}
.template
{
position:relative;
float:left;
width:714px;
height:auto;
padding:17px;
border: 1px solid black;
}
HTML:
<!--Start Build Comic-->
<div class="title">
Title, Episode, Author, etc.
</div>
<div class="date">
Date
</div>
<div class="panel_square_l">
</div>
<div class="panel_square_r">
</div>
<div class="panel_tall_l">
</div>
<div class="panel_square_r">
</div>
<div class="panel_square_r">
</div>
<div class="panel_wide">
</div>
<div class="panel_square_l">
</div>
<div class="panel_square_l">
</div>
<div class="panel_tall_r">
</div>
<!--End Build Comic-->