Question

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

Answer 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');

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

1 个答案: