Каков наилучший способ использования встроенного CSS для позиционирования элементов вокруг блока, заданного внешней таблицей стилей?

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 version: как вы используете CSS для перемещения элемента (в данном случае #regForm) вверх на странице, когда у вас нет доступа для редактирования HTML-кода, генерирующего этот элемент? Без стилизации элемент #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');​