0

フォームの div の配置に問題があります。マイページにはシートが含まれています。以下のようにdivレイアウトを使用します。

左側の div には、フィールドの説明があります。(同じスタイル クラスを共有します) 右側の div には、フィールドがあります。(それらは同じスタイル クラスを共有します)

検証後、私のページは次のようになります。

しかし、私はそれを次のようにしたい：

正直なところ、私はそれをどのように処理するかを考えていました. 私のページはほぼ出来上がっているので、できるだけ低コストで直したいです。

[編集 1]: 私の現在の css は、次のようにシンプルに見えます。

div_on_left{
   clear: both;
   float: left;
   width: 440px;
   padding-top: 5px;
   padding-bottom: 8px;
}
div_on_right{
   float: left;
   width: 500px;
   padding-top: 3px;
   padding-bottom: 6px;
}

[編集 2]: 1 つの解決策 (以下に投稿) を見つけたところですが、気に入りません。左側の div のコンテキストが大きすぎるとクラッシュします。それは

位置:絶対;

したがって、このプロパティは避けたいと思います。

<html>
<head>
<style type="text/css">
.row
{
position:relative;
}
.left
{
font-size:100%;
position:absolute;
left:0px;
bottom:0px;
}
.right
{
font-size:200%;
position:relative;
left:150px;
bottom:0px;
}
</style>
</head>
<body>
<div class="row">
<div class="left">Left_1</div>
<div class="right">Right_1</div>
</div>

<div class="row">
<div class="left">Left_2</div>
<div class="right">Right_2</div>
</div>

<div class="row">
<div class="left">Left_3</div>
<div class="right">Right_3</div>
</div>
</html>

それは一般的な問題でなければなりません。フィールドボックスの上に表示される検証で幅のフォームをどのように処理しますか?

4

1 に答える 1

0

問題の解決策はありますが、table-cellレイアウトが関係しています。レイアウトには、1 つの行と 2 つの内部セルが下部に配置されている必要があります。JSFiddle の例を次に示します: http://jsfiddle.net/cvbLC/

どのブラウザ サポートが必要かはわかりませんが、この件に関する詳細情報は次のとおりです: http://www.quirksmode.org/css/display.html

于 2012-12-20T23:51:02.807 に答える