2

左側にテキスト、右側にフォームが必要なページがあります。ほとんどのブラウザー (Firefox、Chrome、Safari など) で適切に表示 (およびレンダリング) されます。

ただし、IE の一部のバージョンでは、フォームを正しい位置 (右上) に保ちますが、テキストをページの一番下まで押し込みます。

フォームの配置に使用されるコードは次のとおりです。

.custom #conversion_form {
width: 300px;
border: 1px solid #999;
background-color: #e9e9e9;
padding: 25px 30px 25px 25px;
float: right;
display: block;
margin-left: 20px;
}

テキストを左上に保持したり、テキストが押し下げられないようにするために、どのタグを追加する必要がありますか?

デモ: http://rainleader.com/signup

スクリーンショット (どのように見えるか):ここに画像の説明を入力

4

2 に答える 2

2

2 つの div を作成します。1 つはテキスト用、もう 1 つはフォーム用です。

私は常に left アトリビュートの中央 50% を使用し、margin-left または margining-right を使用して、解像度とは無関係に div の位置を処理します。

次の例を参照してください。

テキストの div で、テキストを div 内に配置します。

.div_left_text {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    margin-left:-250px;
    top: 15px;
}

フォームの div で、この div 内にフォームを配置します。

.div_right_form {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    margin-right:250px;
    top: 15px;
}

これにより、左側に 1 つ、右側に 2 つの領域が個別に作成されます。

于 2012-08-11T04:13:35.740 に答える
0

サイド バイ サイド エフェクトを作成する場合は、左のコンテンツを左にフロートし、右のコンテンツを右にフロートし、overflow:hidden;両方をフロートするのが常に最善です。

それでも問題が発生する場合は、両方のコンテンツを a<div>とoverflow:hidden;that でラップします。

于 2012-08-11T04:02:38.673 に答える