3

画像のモックアップを HTML/CSS に変換しようとしていますが、正しく配置するのに苦労しています。特に、垂直方向の配置と、ウィンドウのサイズを変更するときに相対位置にとどまるようにしています。

JSFiddle コード:

http://jsfiddle.net/victorhooi/ZcrCc/

フルスクリーンの JSFiddle 出力:

http://jsfiddle.net/victorhooi/ZcrCc/embedded/result/

私はこのモックアップを持っています:

ここに画像の説明を入力

しかし、上記の JSFiddle を見ると、開始ブランチと終了ブランチ、および中央のタイプ イメージを白いボックス内で垂直方向に揃えることができないようです。それらはどこにでもあります。

HTML:

<section id="proposal" class="backgroundphotos">
<div class="row">
        <div class="col-md-10 col-md-offset-1 panel panel-default">
            <div class="row">
                <div class="col-md-1 col-md-offset-2">
                    <img src="http://www.victorandalpha.com/images/curly_brackets_open.png" />
                </div>
                <div class="col-md-2">
                    <img src="http://www.victorandalpha.com/images/proposal_01.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_02.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_03.png" />
                </div>
                <div class="col-md-2">
                    <img src="http://www.victorandalpha.com/images/proposal_04.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_05.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_06.png" />
                </div>
                <div class="col-md-2">
                    <img src="http://www.victorandalpha.com/images/proposal_07.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_08.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_09.png" />
                </div>
                <div class="col-md-1">
                    <img src="http://www.victorandalpha.com/images/curly_brackets_close.png" />
                </div>
            </div>
        </div>
    </div>
</section>

CSSで：

    .backgroundphotos {
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-attachment: scroll; /* Why does this not carry over? */
        min-height: 800px;

    }

    #proposal {
        background: url(../img/04.jpg) no-repeat center center fixed;
        background-attachment: scroll;
    }

    #proposal > div.row > div > div.row > div {
        position: relative;
        bottom: -90px;
    }

    #proposal > div.row {
        position: relative;
        bottom: -22.500em;
    }

NB: 元の質問を編集して、他の CSS 配置の問題のために別の質問に分割しました。関連する質問は次のとおりです。

CSS 2 つの要素を相互に相対的に配置し、サイズ変更中にその位置を維持する

ホバー時に開く Glyphicon ベースの Navbar の CSS ポジショニング

4

1 に答える 1

0

他の問題を確認する時間ができたら、回答を編集します（別の質問にすることを検討してください）が、ブランチに関する最初の問題については使用しないでくださいbottom: -90px

    #proposal > div.row > div > div.row > div {
        position: relative;
        bottom: 0px; //changed from -90 to just 0
    }

ブランチは完全にフォーマットされましたが、これを行うことでシフトダウンしました。

ただし、問題は、画像が正しく配置されていることです。bottom: -40pxクラスに追加しました.col-md-offset-2が、それはブートストラップのものなので、おそらく編集したくないでしょう。独自のクラスを作成して、それを直接追加するか、すべての.col-md-offset-2div を下にシフトできるラッパー div にカプセル化することができます。

于 2013-09-30T19:03:27.623 に答える