1

私は完全にやり直している漫画のウェブサイトを持っています-棒で木を打つ。

私はその現在の恐ろしい1990年代のレイアウトからこのレイアウトに移行しようとしています（色とフォントは単なるプレースホルダーatmです）...

ここに画像の説明を入力してください

そして、CSSdivがそのためにどのように配置されると私が思うかは次のとおりです。

ここに画像の説明を入力してください

ともかく、

何かが検索されたら、右端の検索バーを下に展開できるようにしようとしています。今、私はその下の行を押し下げます。それらの行から独立している必要があります。基本的に、私の主な目標は、検索バーを上の2つのボックス（ハイライトされたコミックと最新のアートワーク）と一列に並べることですが、出力されたコミックを下に押し下げないことです...それは一種の独立した列である必要があります。

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

2 つの列に対して 2 つの div を作成します (1 つは左側のメイン コンテンツ用、もう 1 つは右側の検索/サイドバー用)。上記の jsfiddle の例では、div がネストされています ( Bootstrap scaffolding docsの「Fluid Nesting」セクションを参照してください)。

また、コミックが出力されている場所の下に移動することはできません (これにより、コミックを押し下げる拡張検索の問題が解決されることはわかっています... しかし、検索ボックスは、ハイライトされたコミックと最新のアートワークと一致する必要があります。ボックス)

上記の例のように、検索を別の列に移動しても、配置を維持できるはずです。

検索欄がコミックを押し下げている理由は、ハイライトされたコミックと最新のアートワークが同じ列に配置されているためです。今の敷き方はこんな感じ。2番目の画像で説明したように、左ブロックと右ブロックをレイアウトする必要があります(上記のjsfiddleの例と同様)。

次の 2 つのリソースも役立つ場合があります。

于 2013-01-19T22:59:14.523 に答える