1

我有一个漫画网站，我正在重做——用棍子打树。

我正在尝试从当前可怕的 1990 年布局转变为这种布局（颜色和字体只是占位符 atm）......

在此处输入图像描述

这就是我认为 CSS div 的布局方式：

在此处输入图像描述

反正，

我试图让最右边的搜索栏能够在搜索到某些内容后向下扩展。现在我向下推它下面的行。它应该独立于这些行。基本上，我的主要目标是让搜索栏与前两个框（突出显示的漫画和最新的艺术作品）内联，但也不下推下面输出的漫画......它只需要成为一个独立的列。

    <div class="row-fluid show-grid">
    <div class="span6 offset2">
        <img src="./images/highlighted comic.png"/>
        <img src="./images/latest artwork.png"/>
    </div>
    <div class="span2">
        <?php include 'include/search_field.php'; ?>
    </div>
</div>

//Where the comics are outputted:
<div class="row-fluid show-grid">   
    <div class="span6 offset2">
        <div class="allimages">
            <div class="row-fluid show-grid">   
                <div class="span6">
                    <h3>latest</h3>
                    <?php include 'scripts/paging.php'; ?>
                </div>
                <div class="span2">
                    <h3>hot</h3>    
                    <?php echo hot(7, $site); ?>
                </div>
            </div>
        </div>
    </div>
</div>

而且我不能只移动<?php include 'include/search_field.php'; ?>到输出漫画的下方（我知道这将解决扩展搜索下推漫画的问题......但搜索框需要与突出显示的漫画和最新艺术品保持一致箱）

这是我搜索时的样子：

预搜索：

在此处输入图像描述

当您搜索某些内容时：

在此处输入图像描述

有什么想法吗？

谢谢！

编辑：我无法将搜索框与左侧框齐平

    <div class="row-fluid">
    <div class="span8 offset2">
        <div class="row-fluid">
            <div class="span5"><img src="./images/highlighted comic.png"/></div>
            <div class="span4"><img src="./images/latest artwork.png"/></div>
        </div>
        <div class="row-fluid">
            <div class="comicDisplay">
                <div class="well">
                    <div class="row-fluid"> 
                        <div class="span7"><h3>Latest</h3>  <?php include 'scripts/paging.php'; ?></div>
                        <div class="span2"><h3>Hot</h3> <?php echo hot(7, $site); ?></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="span2">
        <?php include 'include/search_field.php'; ?>
    </div>
</div><!--End top row fluid-->

在此处输入图像描述

4

1 回答 1

1

独立栏

就是这样！

看看这个（来自http://jsfiddle.net/Q7k7W/3/）：

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<style type="text/css">
.b {
    border: 1px solid #ccc;
    padding: 10px;
}
</style>

<div class="container-fluid" style="margin-top: 20px;">
    <div class="row-fluid">
        <!-- The main content column placed on the left (for appropriate viewports/browser widths) -->
        <div class="span9 b">
            <div class="row-fluid">
                <div class="span8 b">Highlighted Comic</div>
                <div class="span4 b">Latest Artwork</div>
            </div>
            <div class="row-fluid">
                <div class="span8 b">Latest</div>
                <div class="span4 b">Hot</div>
            </div>
        </div>
        <!-- 
        The search/sidebar column placed on the right.
        The height of this column shouldn't affect the height of the left column.
        -->
        <div class="span3 b" style="height: 300px;">
            Search
        </div>
    </div>
</div>

您将为两列创建两个 div（一个用于左侧的主要内容，另一个用于右侧的搜索/侧边栏）。在上面的 jsfiddle 示例中，div 是嵌套的（请参阅Bootstrap 脚手架文档的“流体嵌套”部分）。

而且我不能只移动到输出漫画的下方（我知道这将解决扩展搜索下推漫画的问题......但搜索框需要与突出显示的漫画和最新艺术品保持一致箱）

如果将搜索移动到不同的列（如上例所示），您仍然应该能够保持对齐。

搜索栏之所以下推漫画，是因为它与突出显示的漫画和最新的艺术品在同一行布局。它目前的铺设方式是这样的。您需要按照您在第二张图片中的描述进行布局：左块和右块（就像上面的 jsfiddle 示例一样）。

您可能会发现这两个资源也很有帮助：

于 2013-01-19T22:59:14.523 回答