Як я можу переупорядкувати свої divs за допомогою лише CSS?

З огляду на шаблон, коли HTML не може бути змінено через інші вимоги, як можна відображати (переставляти) 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 (і, мабуть, доведеться його зустріти з іншими рішеннями, якщо це не виключається).

За цим є й інші елементи. Була згадана хороша пропозиція з огляду на обмежений сценарій, який я продемонстрував - враховуючи, що це може бути найкращою відповіддю, але я хочу також переконатись, що елементи, що слідують за цим, не впливають.

Це рішення використовує лише CSS та працює зі змінним вмістом

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }

Рішення лише для CSS (працює для IE10 + ) - використовуйте властивість Flexbox order:

Демонстрація: http://jsfiddle.net/hqya7q6o/596/

#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }

<div id="flex">
   <div id="a">A</div>
   <div id="b">B</div>
   <div id="c">C</div>
</div>

Більше інформації: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Як говорили інші, це не те, що ви хотіли б робити у CSS. Ви можете підробити це з абсолютним позиціонуванням і дивними полями, але це просто не надійне рішення. Найкращим варіантом у вашому випадку буде звернення до javascript. У jQuery це дуже просте завдання:

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

або більш загально:

$('.swapMe').each(function(i, el) {
    $(el).insertBefore($(el).prev());
});

Це можна зробити за допомогою Flexbox.

Створення контейнера , який застосовується як дисплей: Flex і Flex-потік: колонок-зворотний .

/* -- Where the Magic Happens -- */

.container {
  
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;

}


/* -- Styling Only -- */

.container > div {
  background: red;
  color: white;
  padding: 10px;
}

.container > div:last-of-type {
  background: blue;
}

<div class="container">
  
  <div class="first">

     first

  </div>
  
  <div class="second">

    second

  </div>
  
</div>

Джерела:

• https://css-tricks.com/using-flexbox/
• https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow#Browser_compatibility

Немає абсолютно ніякого способу досягти того, що ви хочете, лише за допомогою 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.

Ось таке рішення:

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

Але я підозрюю, що у вас є якийсь вміст, який слідкує за дією обгортки ...

За допомогою модуля розкладки CSS3 flexbox ви можете замовити діви.

#wrapper {
  display: flex;
  flex-direction: column;
}
#firstDiv {
  order: 2;
}

<div id="wrapper">
  <div id="firstDiv">
    Content1
  </div>
  <div id="secondDiv">
    Content2
  </div>
</div>

Якщо ви знаєте чи можете примусити розмір для елемента, який повинен бути вище, ви можете використовувати

position : absolute;

У своєму css і дайте дівам своє положення.

інакше JavaScript здається єдиним способом:

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

чи щось подібне.

редагувати: Я щойно знайшов це, що може бути корисним: w3 документ css3 перехід

Негативні верхні поля можуть досягти цього ефекту, але їх потрібно налаштувати для кожної сторінки. Наприклад, ця розмітка ...

<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, це може бути варіантом .

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

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

Особливо неприємний біт "margin-top: 4em": цей запас потрібно коригувати відповідно до кількості вмісту в першомуДіві. Залежно від ваших точних вимог, це може бути можливим, але я все-таки сподіваюся, що хтось, можливо, зможе побудувати на цьому для міцного рішення.

Коментар Еріка щодо JavaScript, мабуть, слід переслідувати.

Це можна зробити лише за допомогою CSS!

Будь ласка, перевірте мою відповідь на подібне подібне запитання:

https://stackoverflow.com/a/25462829/1077230

Я не хочу подвоювати свою відповідь, але недолік цього полягає в тому, що батько повинен стати елементом флексбоксу. Наприклад:

(тут використовується лише префікс веб-постачальника.)

#main {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

Потім поміняйте місцями діви, вказуючи їх замовлення:

#main > div#one{
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    overflow:visible;
}

#main > div#two{
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}

У своєму CSS плаваємо перший розділ ліворуч або праворуч. Перемістіть другий діл ліворуч або праворуч так само, як перший. Застосуйте clear: leftабо rightте саме, що і вище два вище діви для другого діла.

Наприклад:

#firstDiv {
    float: left;
}

#secondDiv {
    float: left;
    clear: left;
}

Якщо ви просто використовуєте css, ви можете використовувати flex.

.price {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: row-reverse; //revert horizontally
    //flex-direction: column-reverse; revert vertically
}

<div class="price">
      <div>first block</div>
      <div>second block</div>
</div>

Я шукав спосіб змінити замовлення дівок тільки для мобільної версії, щоб потім міг це стильно. Завдяки відповіді nickf, я маю зробити цей фрагмент коду, який добре працював на те, що я хотів, тому я хотів би поділитися ним з вами, хлопці:

//  changing the order of the sidebar so it goes after the content for mobile versions
jQuery(window).resize(function(){
    if ( jQuery(window).width() < 480 )
    {
        jQuery('#main-content').insertBefore('#sidebar');
    }
    if ( jQuery(window).width() > 480 )
    {
        jQuery('#sidebar').insertBefore('#main-content');
    }
    jQuery(window).height(); // New height
    jQuery(window).width(); // New width
});

Рішення з більшою підтримкою браузера, ніж флешбокс (працює в IE≥9):

#wrapper {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}
#wrapper > * {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}

<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

На відміну від display: table;рішення, це рішення працює, коли .wrapperє будь-яка кількість дітей.

Просто використовуйте flex для батьківського div, вказавши display: flexта flex-direction : column. Потім скористайтеся порядком, щоб визначити, хто з дитячих дівок належить першим

CSS дійсно не слід використовувати для реструктуризації HTML-сервера. Однак це можливо, якщо ви знаєте висоту обох задіяних елементів і відчуваєте хекш. Також вибір тексту буде зіпсований під час переходу між знаками, але це тому, що порядок HTML та CSS протилежний.

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

Де XXX та YYY - висота першогоDiv та SecondDiv відповідно. Це буде працювати з останніми елементами, на відміну від верхньої відповіді.

У мене набагато кращий код, зроблений мною, він настільки великий, просто показати обидві речі ... створити таблицю 4x4 і вертикальне вирівнювання більше, ніж просто одну клітинку.

Він не використовує жодного злому IE, немає вертикального вирівнювання: середній; зовсім...

Він не використовується для вертикального центрального дисплея, дисплея: table-rom; дисплей: таблиця-комірка;

Він використовує трюк контейнера, який містить два діви, один прихований (позиція не є правильним, але змушує батьків мати правильний розмір змінної), один видно відразу після прихованого, але зверху: -50%; так що це рушій виправити положення.

Дивіться класи класів, які роблять хитрість: BloqueTipoContenedor BloqueTipoContenor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible

Вибачте за використання іспанської мови в назвах класів (це тому, що я розмовляю іспанською, і це настільки складно, що якщо я використовую англійську, я гублюся).

Повний код:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en" />
<meta name="language" content="en" />
<title>Vertical Centering in CSS2 - Example (IE, FF & Chrome tested) - This is so tricky!!!</title>
<style type="text/css">
 html,body{
  margin:0px;
  padding:0px;
  width:100%;
  height:100%;
 }
 div.BloqueTipoTabla{
  display:table;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoFila_AltoAjustadoAlContenido{
  display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:auto;
 }
 div.BloqueTipoFila_AltoRestante{
  display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoCelda_AjustadoAlContenido{
  display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:auto;
 }
 div.BloqueTipoCelda_RestanteAncho{
  display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:auto;
 }
 div.BloqueTipoCelda_RestanteAlto{
  display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:100%;
 }
 div.BloqueTipoCelda_RestanteAnchoAlto{
  display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoContenedor{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:100%;position:relative;
 }
 div.BloqueTipoContenedor_VerticalmenteCentrado{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;position:relative;top:50%;
 }
 div.BloqueTipoContenido_VerticalmenteCentrado_Oculto{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:hidden;position:relative;top:50%;
 }
 div.BloqueTipoContenido_VerticalmenteCentrado_Visible{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:visible;position:absolute;top:-50%;
 }
</style>
</head>
<body>
<h1>Vertical Centering in CSS2 - Example<br />(IE, FF & Chrome tested)<br />This is so tricky!!!</h1>
<div class="BloqueTipoTabla" style="margin:0px 0px 0px 25px;width:75%;height:66%;border:1px solid blue;">
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [1,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,4]
  </div>
 </div>
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [2,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,4]
  </div>
</div>
 <div class="BloqueTipoFila_AltoRestante">
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
     The cell [3,1]
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;one
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
     The cell [3,1]
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;one
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This&nbsp;is<br />cell&nbsp;[3,2]
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This&nbsp;is<br />cell&nbsp;[3,2]
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAnchoAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This is cell [3,3]
      <br/>
      It is duplicated on source to make the trick to know its variable height
      <br />
      First copy is hidden and second copy is visible
      <br/>
      Other cells of this row are not correctly aligned only on IE!!!
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This is cell [3,3]
      <br/>
      It is duplicated on source to make the trick to know its variable height
      <br />
      First copy is hidden and second copy is visible
      <br/>
      Other cells of this row are not correctly aligned only on IE!!!
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This&nbsp;other is<br />the cell&nbsp;[3,4]
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This&nbsp;other is<br />the cell&nbsp;[3,4]
     </div>
    </div>
   </div>
  </div>
 </div>
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [4,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,4]
  </div>
 </div>
</div>
</body>
</html>

Трохи запізнюємось на вечірку, але ви також можете це зробити:

<div style="height: 500px; width: 500px;">

<div class="bottom" style="height: 250px; width: 500px; background: red; margin-top: 250px;"></div>

<div class="top" style="height: 250px; width: 500px; background: blue; margin-top: -500px;"></div>

Або встановіть для елемента абсолютне положення і опрацюйте поля, оголосивши їх від краю сторінки, а не від краю об’єкта. Використовуйте% як його більше підходить для інших розмірів екрана тощо. Ось як я подолав проблему ... Дякую, сподіваюся, що ви шукаєте ...

Для рішення тільки для CSS 1. Будь-яка висота обгортки має бути фіксованою, або 2. висота другого поділу

.move-wrap {
    display: table;
    table-layout: fixed; // prevent some responsive bugs
    width: 100%; // set a width if u like
    /* TODO: js-fallback IE7 if u like ms */
}

.move-down {
    display: table-footer-group;
}

.move-up {
    display: table-header-group;
}

Це легко за допомогою css, просто використання display:blockта z-indexвласності

Ось приклад:

HTML:

<body>
    <div class="wrapper">

        <div class="header">
            header
        </div>

        <div class="content">
            content
        </div>
    </div>
</body>

CSS:

.wrapper
{
    [...]
}

.header
{
    [...]
    z-index:9001;
    display:block;
    [...]
}

.content
{
    [...]
    z-index:9000;
    [...]
}

Редагувати: Добре налаштувати деяких, background-colorщоб div-sправильно бачити речі.

У мене простий спосіб це зробити.

<!--  HTML  -->

<div class="wrapper">

    <div class="sm-hide">This content hides when at your layouts chosen breaking point.</div>

    <div>Content that stays in place</div>

    <div class="sm-show">This content is set to show at your layouts chosen breaking point.</div>

</div>

<!--  CSS  -->

    .sm-hide {display:block;}
    .sm-show {display:none;}

@media (max-width:598px) {
    .sm-hide {display:none;}
    .sm-show {display:block;}
}