css - 使用内联 CSS 在外部样式表指定的 block 周围定位元素的最佳方法是什么？

Question

我如何为该页面的表单生成部分指定一个位置，然后使用内联 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。我们还可以将覆盖元素添加到外部 CSS 样式表，但不能直接编辑整个样式表。

tl:dr 版本:当您无权编辑生成该元素的 HTML 时，如何使用 CSS 将元素(在本例中为 #regForm)移动到页面中更高的位置元素？没有样式，#regForm 元素只是附加到末尾。

Answer 1

如果您希望页面正常流动并且让#regdiv 首先出现，您可以 float 列和表单，然后使用 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');​