3

このページのフォーム生成部分の位置を指定し、インライン CSS を使用してその周りに要素を配置するにはどうすればよいですか? https://org2.democracyinaction.org/o/6351/p/salsa/event/common/public/?event_KEY=50926

私たちの中途半端な一時的な解決策は、複数の絶対要素を使用しています。残念ながら、これらはクロスブラウザーで異なるパフォーマンスを発揮し、特にモバイルではパフォーマンスが低下します (ページ要素内でオーバーフローやスクロールが発生します)。

フォームで生成された登録ボックスを左上に移動するために、外部スタイルシートに追加したものを次に示します。

#regForm {width: 400px; position:absolute; clear:left; top:315px; }

これは、その周りに div 要素を配置するインラインの試みです。

<div> top element (quotes)
</div>
<div style="height:2400px"></div> 
//I put this in to keep the bottom page border from overlapping the absolute divs

<div style="position: absolute; top: 350px; left: 450px; width: 520px; 
overflow: auto; margin: 0px; padding: 0px;"> 
right column (of explanation text) </div>
<p></p>
<div style="position: absolute; top: 815px; left: 15px; width: 400px; 
overflow: auto; margin: 0px; padding: 0px;">  
left column (more info about the #regForm box above, plus images) </div>

達成する必要があること:

[          top element         ]

[#regForm div] [right column   ]

[left column ]

制約: フォームで生成されたページを再フォーマットしています。HTML コンテンツをページに追加し、インライン CSS を使用できる入力パネルが 1 つあります。外部 CSS スタイルシートにオーバーライド要素を追加することもできますが、スタイルシート全体を直接編集することはできません。

tl:dr バージョン: 要素を生成する HTML を編集するアクセス権がない場合、CSS を使用して要素 (この場合は #regForm) をページの上部に移動するにはどうすればよいですか? スタイルを設定しないと、#regForm 要素が末尾に追加されるだけです。

4

1 に答える 1

1

ページが適切に流れ、#regdiv が最初に表示されるようにする場合は、列とフォームをフロートさせてから、jQuery を使用してドキュメント ツリー内でフォームを上に移動できます。

jsFiddle での例: http://jsfiddle.net/TjDmw/11/

HTML:

<div id="container">
<div id="rightcol"></div>
<div id="leftcol"></div>
<div id="regdiv"></div><!--Last in HTML, but moved up with jQuery-->
</div>​​​​​​​​​​​​​​​​

CSS:

#container {
    border:2px black solid;
    width:400px;    
    float:left;
}
#rightcol{
    background:red;
    width:200px;
    height:400px;
    float:right;
}
#leftcol{
    background:blue;
    width:160px;
    height:450px;
    float:left;
}
#regdiv{
    background:green;
    width:140px;
    height:220px;
    float:left;
}

JS:

$('#regdiv').insertBefore('#rightcol');​

</p>

于 2012-12-19T14:31:33.650 に答える