0

HTML5 を使用しており、ページの左側に画像を配置し、画像の右側にフォームを配置したいと考えています。画像は任意のサイズになる可能性があるため、相対的な配置になります。CSS はこれを行うための最良の方法ですか、それとも HTML を使用するだけのより良い方法はありますか?

私は次のことを試しました

<div class='container'>
    <div class='left'>
        <form action="javascript:ShowLoadedImage(document.getElementById('image-field').value);">
          <input type="file" accept="image/*" id="image-field" name="image" onchange="this.form.submit()">
        </form>
    </div>
    <div class='right'>
        <form>
            First name: <input type="text" name="firstname"><br>
            Last name: <input type="text" name="lastname">           
        </form>
    </div>
    <div class='clear'></div>
</div>

しかし、フォームの下に画像を取得しました。実際、ブロックの外側の後続のコードから、それらの間にボタンを取得しました。

4

1 に答える 1

1

基本的な HTML/CSS を使用します。

HTML:

<div class='container'>
    <div class='left'>
        <form>
            <!-- your form -->
        </form>
    </div>
    <div class='right'>
        <!-- your image -->
    </div>
    <div class='clear'></div>
</div>

CSS:

.container {
    width: 300px;
}
.left {
    float:left;
}
.right {
    float:right;
}
.clear {
    clear:both;
}

ここでフィドル: http://jsfiddle.net/SUEHs/

(要素がどのように流れるかを確認できるように、複数の画像サイズを用意しました)。

于 2013-04-19T16:05:06.750 に答える