3

如何为该页面的表单生成部分指定位置，然后使用内联 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 元素只会被附加到末尾。

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 回答