2

写真とフォームを並べて表示していますが、目的の効果が得られません。これは、最初は次のようになります。

ここに画像の説明を入力

これはクールですが、画像が大きすぎます。含まれる画像は変化する可能性があるため、画像が変形するため、固定幅と高さはオプションではありません。高さのプロパティを指定して、それに応じて幅を調整したいと思います。これを行うと、次のようになります。

ここに画像の説明を入力

画像が下に整列している理由がわかりません...クロムメトリックはそのスペースに何も表示しません。パディングなし、マージンなし、何もありません。ブラウザー ウィンドウのサイズを変更するとレイアウトが応答し、画像がウィンドウの外に投げ出されるため、負のマージンを使用できません。これは -270px の margin-top でどのように見えるかです (これはまさに私が望むものです)。

ここに画像の説明を入力

しかし、サイズを変更すると、これが起こります。

ここに画像の説明を入力

HTML スニペットを次に示します。さらにコードが必要な場合は教えてください：

<div class="well second-step">
    <div>
        <div><img class="img-polaroid"></div>
        <div style="">
            <form id="{{ form.auto_id|pyformat:'form' }}" class="form-horizontal" action="{% url 'look-creation-view' %}" method="POST">
                <div class="control-group">
                    <input type="text" name="title" placeholder="Look's title">
                </div>
                <div class="control-group">
                    <textarea name="description" placeholder="Description"></textarea>
                </div>
                <div style="margin-left: 50px;">
                    <input type="reset" class="btn btn-danger" value="Cancel">
                    <input type="submit" class="btn btn-success" value="Publish">
                </div>
                <input type="hidden" name="image">
            </form>
        </div>
    </div>
</div>

編集：

bootply を作成し、問題が再現されるまでコードを追加しました。十分だと思います。ここにあります：http://bootply.com/76022

4

2 に答える 2

2

あなたはこれを考えるかもしれません：

最初のステップ:幅と高さを持つ div を使用する:

<div class="image"></div>

CSSを適用するより

.div {
width: 500px;
height: 300px;
}

ステップ 2:画像を次のようにラップします。

<div class="image"><img src="~/folder/file.png" alt="photo: /></div>

cssを適用してみる

.image img {
width: 100%;
heighti: 100%;
}

この CSS は、div に従って高さと幅を取得します。div の幅は 500px であるため、幅がそれ以上になることはありません。

3 番目のステップ:

左上にあることを確認するには、次を使用します。

.image img {
position: absolute;
top: 0px;
left: 0px;
}

3 番目のステップは、画像の左と上からの余白が 0 であることを意味します。

于 2013-08-21T17:31:31.790 に答える
0

次のように、絶対配置を使用して、含まれている div の上部に配置してみてください。

<div class="well second-step">
    <div id="img-form-container">
        <div><img class="img-polaroid"></div>
        <div style="">
            <form id="{{ form.auto_id|pyformat:'form' }}" class="form-horizontal" action="{% url 'look-creation-view' %}" method="POST">
                <div class="control-group">
                    <input type="text" name="title" placeholder="Look's title">
                </div>
                <div class="control-group">
                    <textarea name="description" placeholder="Description"></textarea>
                </div>
                <div style="margin-left: 50px;">
                    <input type="reset" class="btn btn-danger" value="Cancel">
                    <input type="submit" class="btn btn-success" value="Publish">
                </div>
                <input type="hidden" name="image">
            </form>
        </div>
    </div>
</div>

と

img-form-container {
    position: relative;
};
img-polaroid {
    position: absolute;
    top:0px; //this can be changed to give it margin
};
于 2013-08-21T17:22:22.987 に答える