Question

我正在建立一个网站，供客户制作漫画。面板有五个div：

右方
左方
右高（双倍高度）
左高（双高）
双宽

我正在尝试提供一种解决方案来教他们钓鱼而不是给他们钓鱼。

这是我的问题：

如果你去'模板'div（有漫画面板）的底部，你会看到底部设置不对。它应该镜像第二组，所以左边不是一个高，右边是两个正方形，我想要左边有两个正方形，右边有高。我尝试过几件事无济于事。这就是我所拥有的代码：

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

Answer 1

您正在尝试进行网格布局。查看此文章以获取提示。 http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/

Answer 2

我最终做的是创建一个div作为一个块（一个面板高度为一个面板，两个面板宽度相对），两个（并排面板，每个面板高一个，一个面对面），）或三个（一个面板，两个面板高于两个面板上/下）漫画面板。这使条带编写器能够自定义每个条带的布局。

您可以查看here

浏览一些档案以查看不同的布局。

构建漫画网站，允许所有者使用CSS和HTML以自定义方式放置面板（div）

2 个答案: