如何为该页面的表单生成部分指定位置，然后使用内联CSS在其周围放置元素？https://org2.democracyinaction.org/o/6351/p/salsa/event/common/public/?event_KEY=50926
我们半生不熟的临时解决方案使用了多个Absolute元素。不幸的是，它们在跨浏览器中的表现不同，在移动设备上尤其糟糕(导致页面元素溢出和滚动)。
下面是我对外部样式表的补充，将表单生成的注册框向上向左移动：
#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。我们还可以向外部CSS样式表添加覆盖元素，但不能直接编辑整个样式表。
tl:dr版本：当您没有权限编辑生成元素的HTML时，如何使用CSS将元素(在本例中为#regForm)移动到页面的更高位置？在没有样式的情况下，#regForm元素只是被附加到末尾。
如果您希望页面正常流动并首先显示#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');