Question

我有一个漫画网站，我正在完成重做 - Hitting Trees with Sticks。

我正试图从目前可怕的1990年布局转到这种布局（颜色和字体只是占位符atm）......

enter image description here

以下是我认为CSS divs的布局方式：

enter image description here

反正

我试图让搜索到最近的搜索栏能够在搜索到某些东西时向下扩展。现在我按下它下面的行。它应该独立于那些行。基本上，我的主要目标是让搜索栏与前两个框（突出显示漫画和最新作品）一致，但也不要压低下面输出的漫画...它只需要一个独立柱

    <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'; ?>移到漫画输出的下方（我知道这会解决扩大搜索推动漫画的问题......但是搜索框需要与突出显示的漫画和最新作品框保持一致）

这是我搜索时的样子：

预搜索：

enter image description here

当您搜索某些内容时

enter image description here

有什么想法吗？

谢谢！

编辑：我无法将搜索框推向左侧框

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

enter image description here

Answer 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 scaffolding docs的'Fluid nesting'部分）。

我不能只是搬到在下面输出漫画的地方（我知道这会解决问题扩大搜索推动漫画的问题......但是搜索框需要与突出显示的漫画和最新艺术品盒）

如果将搜索移动到其他列（如上例所示），您仍然可以保持对齐。

搜索栏推下漫画的原因是因为它与突出显示的漫画和最新的艺术作品在同一行中布局。它目前铺设的方式是like so。您需要按照your second image中的描述进行布局：左侧块和右侧块（就像上面的jsfiddle示例中一样）。

您可能会发现这两种资源也很有用：

http://css-tricks.com/all-about-floats/

http://www.barelyfitz.com/screencast/html-training/css/positioning/

引导 - 对齐问题

1 个答案: