Как я могу переупорядочить свои отделения, использующие только CSS?

Учитывая шаблон, где HTML не может быть изменен из-за других требований, как возможно отобразиться (перестраивают) a div выше другого div когда они не находятся в том порядке в HTML? Оба divs содержат данные, которые варьируются по высоте и ширине.

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

Надо надеяться, очевидно, что желаемый результат:

Content to be above in this situation
Content to be below in this situation
Other elements

Когда размеры фиксируются это легкий расположить их при необходимости, но мне нужны некоторые идеи для того, когда содержание является переменным. Ради этого сценария просто полагайте, что ширина составляет 100% на обоих.

Я конкретно ищу решение только для CSS (и оно должно будет, вероятно, быть встречено другими решениями, если это не удается).

Существуют другие элементы после этого. Хорошее предложение было упомянуто, учитывая ограниченный сценарий, который я продемонстрировал — учитывая, что это мог бы быть лучший ответ, но я надеюсь также удостоверяться, что на элементы после этого не влияют.

251
задан TylerH 12 August 2019 в 04:03
поделиться

7 ответов

CSS действительно не должен использоваться для реструктуризации бэкенда HTML. Однако возможно, если Вы знаете высоту обоих включенных элементов и чувствуете hackish. Кроме того, текстовый выбор будет испорчен при движении между отделениями, но поэтому HTML и порядок CSS противоположны.

#firstDiv { position: relative; top: YYYpx; height: XXXpx; }
#secondDiv { position: relative; top: -XXXpx; height: YYYpx; }

, Где XXX и YYY высоты firstDiv и secondDiv соответственно. Это будет работать с запаздывающими элементами, в отличие от главного ответа.

-1
ответ дан user65952 23 November 2019 в 02:54
поделиться

Ну, с небольшим количеством абсолютного расположения и некоторой изворотливой установкой поля, я могу быть рядом, но это не прекрасно или симпатично:

#wrapper { position: relative; margin-top: 4em; }
#firstDiv { position: absolute; top: 0; width: 100%; }
#secondDiv { position: absolute; bottom: 0; width: 100%; }

"граничная вершина: 4em" особенно противный бит: это поле должно быть скорректировано согласно сумме содержания в firstDiv. В зависимости от Ваших строгих требований это могло бы быть возможно, но я надеюсь так или иначе, что кто-то мог бы быть в состоянии основываться на этом для твердого раствора.

комментарий Eric о JavaScript должен, вероятно, преследоваться.

4
ответ дан TylerH 23 November 2019 в 02:54
поделиться

Отрицательные верхние поля могут достигнуть этого эффекта, но они должны были бы быть настроены для каждой страницы. Например, эта разметка...

<div class="product">
<h2>Greatest Product Ever</h2>
<p class="desc">This paragraph appears in the source code directly after the heading and will appear in the search results.</p>
<p class="sidenote">Note: This information appears in HTML after the product description appearing below.</p>
</div>

... и этот CSS...

.product { width: 400px; }
.desc { margin-top: 5em; }
.sidenote { margin-top: -7em; }

... позволил бы Вам вытягивать второй абзац выше первого.

, Конечно, необходимо будет вручную настроить CSS для различных длин описания так, чтобы вводный абзац подпрыгнул ассигновать сумма, но если Вы ограничили управление другими частями и полный контроль над разметкой и CSS тогда, это могло бы быть опцией.

5
ответ дан Carl Camera 23 November 2019 в 02:54
поделиться

Если Вы знаете или можете осуществить размер для будущего верхнего элемента, Вы могли бы использовать

position : absolute;

В Вашем css и дать отделениям их положение.

иначе JavaScript кажется единственным способом пойти:

fd = document.getElementById( 'firstDiv' );
sd = document.getElementById( 'secondDiv' );
fd.parentNode.removeChild( fd );
sd.parentNode.insertAfter( fd, sd );

или что-то подобное.

редактирование: Я просто нашел это, которое могло бы быть полезным: w3 перемещение документа css3 - к

5
ответ дан Kris 23 November 2019 в 02:54
поделиться

Вот решение:

<style>
#firstDiv {
    position:absolute; top:100%;
}
#wrapper {
    position:relative; 
}

, Но я подозреваю, что у Вас есть некоторое содержание, которое следует за отделением обертки

16
ответ дан buti-oxa 23 November 2019 в 02:54
поделиться

Нет абсолютно никакого способа достигнуть того, что Вы хотите через один только CSS при поддержке pre-flexbox агентов пользователя ( главным образом старый IE) - если :

  1. Вы знаете точную представленную высоту каждого элемента (если так, можно абсолютно расположить содержание). Если Вы имеете дело с динамично сгенерированным содержанием, Вам не повезло.
  2. Вы знаете точное число этих элементов будет. Снова, если необходимо сделать это для нескольких блоков содержания, которые сгенерированы динамично, Вам не повезло, особенно если существуют больше чем три или около этого.

, Если вышеупомянутое верно затем, что можно сделать то, что Вы хотите путем абсолютного расположения элементов -

#wrapper { position: relative; }
#firstDiv { position: absolute; height: 100px; top: 110px; }
#secondDiv { position: absolute; height: 100px; top: 0; }

Снова, если Вы не знаете, высота хочет для, по крайней мере, #firstDiv, нет никакого способа, которым можно сделать то, что Вы хотите с помощью одного только CSS. Если какое-либо это содержание является динамичным, необходимо будет использовать JavaScript.

25
ответ дан Damian Yerrick 23 November 2019 в 02:54
поделиться

Как другие сказали, это не что-то, что Вы хотели бы сделать в CSS. Можно уклониться от него с абсолютным расположением и странными полями, но это - просто не надежное решение. Наилучший вариант в Вашем случае состоял бы в том, чтобы обратиться к JavaScript. В jQuery это - очень простая задача:

$('#secondDiv').insertBefore('#firstDiv');

или более в общем:

$('.swapMe').each(function(i, el) {
    $(el).insertBefore($(el).prev());
});
79
ответ дан nickf 23 November 2019 в 02:54
поделиться
Другие вопросы по тегам:

Похожие вопросы: