Div'lerimi yalnızca CSS kullanarak nasıl yeniden sıralayabilirim?

HTML çünkü diğer gereksinimleri değiştirilemez bir şablon göz önüne alındığında, nasıl bir görüntü düzenleyebilirsiniz () mümkündür divdiğerinin üstünde divHTML'de sırayla olmadığında? Her iki divs de yükseklik ve genişlikte değişen veriler içerir.

<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

Umarım istenen sonuç şudur:

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

Boyutlar sabitlendiğinde, bunları gerektiğinde konumlandırmak kolaydır, ancak içerik değişken olduğunda bazı fikirlere ihtiyacım var. Bu senaryo için, lütfen genişliğin her ikisinde de% 100 olduğunu düşünün.

Ben özellikle sadece bir CSS çözümü arıyorum (ve muhtemelen dışarı kaydırmazsa diğer çözümlerle karşılanması gerekir).

Bunu takip eden başka unsurlar da var. En iyi yanıt olabileceği göz önüne alındığında, gösterdiğim sınırlı senaryo göz önüne alındığında iyi bir öneriye değinildi, ancak bunu izleyen öğelerin etkilenmediğinden de emin olmak istiyorum.

Bu çözüm yalnızca CSS kullanır ve değişken içerikle çalışır

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

Yalnızca CSS çözümü ( IE10 + için çalışır ) - Flexbox'ın orderözelliğini kullanın :

Demo: 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>

Daha fazla bilgi: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Diğerlerinin söylediği gibi, bu CSS'de yapmak istediğiniz bir şey değildir. Mutlak konumlandırma ve garip kenar boşlukları ile geçebilirsiniz, ancak bu sağlam bir çözüm değildir. Durumunuzdaki en iyi seçenek javascript'e dönmektir. JQuery'de bu çok basit bir görevdir:

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

veya daha genel olarak:

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

Bu, Flexbox kullanılarak yapılabilir.

De geçerlidir bir kap oluşturmak esnek: görüntü ve esnek akışı: kolon-ters .

/* -- 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>

Kaynaklar:

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

Önceden flexbox kullanıcı aracılarını ( çoğunlukla eski IE ) desteklerken tek başına CSS aracılığıyla istediğinizi elde etmenin kesinlikle bir yolu yoktur - aksi takdirde :

1. Her öğenin tam olarak görüntülenen yüksekliğini biliyorsunuz (eğer öyleyse, içeriği kesinlikle konumlandırabilirsiniz). Dinamik olarak oluşturulan içerikle uğraşıyorsanız, şansınız kalmaz.
2. Bu elemanların tam sayısını bilirsiniz. Yine, bunu dinamik olarak oluşturulan birkaç içerik parçası için yapmanız gerekiyorsa, özellikle üçten fazla varsa, şansınız kalmaz.

Yukarıdakiler doğruysa, öğeleri kesinlikle konumlandırarak istediğinizi yapabilirsiniz -

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

Yine, en azından #firstDiv için istediğiniz yüksekliği bilmiyorsanız, istediğinizi tek başına CSS ile yapmanın bir yolu yoktur. Bu içeriğin herhangi biri dinamikse, javascript kullanmanız gerekecektir.

İşte bir çözüm:

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

Ama sarıcı div takip bazı içerik var şüpheli ...

CSS3 flexbox mizanpaj modülü ile div sipariş edebilirsiniz.

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

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

Üst öğe olacak öğenin boyutunu biliyorsanız veya uygulayabiliyorsanız,

position : absolute;

Css'nizde ve div'lere pozisyonlarını verin.

Aksi takdirde javascript gitmek için tek yol gibi görünüyor:

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

Veya benzeri.

edit: Ben sadece yararlı olabilir buldum: w3 belge css3 move-to

Negatif üst kenar boşlukları bu efekti elde edebilir, ancak her sayfa için özelleştirilmeleri gerekir. Örneğin, bu işaretleme ...

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

... ve bu CSS ...

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

... ilk paragrafın üstündeki ikinci paragrafı çekmenize izin verir.

Tabii ki, giriş paragrafının uygun miktarı atlaması için farklı açıklama uzunlukları için CSS'nizi manuel olarak ayarlamanız gerekir, ancak diğer parçalar üzerinde sınırlı kontrolünüz ve işaretleme ve CSS üzerinde tam kontrolünüz varsa, bu bir seçenek olabilir .

Biraz mutlak konumlandırma ve bazı tehlikeli marj ayarı ile yaklaşabilirim, ancak mükemmel veya güzel değil:

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

"Margin-top: 4em" özellikle kötü bir bit: bu marjın firstDiv'deki içerik miktarına göre ayarlanması gerekiyor. Tam gereksinimlerinize bağlı olarak, bu mümkün olabilir, ancak yine de birisinin sağlam bir çözüm için bunun üzerine inşa edebileceğini umuyorum.

Eric'in JavaScript hakkındaki yorumu muhtemelen takip edilmelidir.

Bu sadece CSS ile yapılabilir!

Lütfen bu benzer soruya cevabımı kontrol et:

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

Cevabımı iki kez göndermek istemiyorum ama kısaca ebeveynin bir flexbox öğesi olması gerekiyor. Örneğin:

(yalnızca burada webkit satıcı önekini kullanarak.)

#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;
}

Ardından, div'larını siparişlerini şu şekilde belirterek değiştirin:

#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'nizde, ilk div'i sola veya sağa kaydırın. İkinci div'i ilk ile aynı şekilde sağa veya sola kaydırın. İkinci div için yukarıdaki iki div'i uygulayın clear: leftveya rightaynı.

Örneğin:

#firstDiv {
    float: left;
}

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

Sadece css kullanıyorsanız flex kullanabilirsiniz.

.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>

Div'in siparişlerini yalnızca mobil sürüm için değiştirmenin bir yolunu arıyordum, böylece güzel bir şekilde stil verebilirim. Nickf cevap sayesinde istediğim için iyi çalışan bu kod parçasını yapmalıyım, bu yüzden sizlerle paylaşıyorum ama:

//  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
});

Flexbox'tan daha büyük tarayıcı desteğine sahip bir çözüm (IE9'da çalışır):

#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;Çözümün aksine, bu çözüm .wrapperherhangi bir miktarda çocuk olduğunda çalışır .

Sadece belirterek üst div için esnek kullanmak display: flexve flex-direction : column. Sonra hangi div alt bölümünün ilk geldiğini belirlemek için sırayı kullanın

CSS gerçekten HTML arka ucunu yeniden yapılandırmak için kullanılmamalıdır. Bununla birlikte, her iki öğenin yüksekliğini biliyorsanız ve hackish hissediyorsanız mümkündür. Ayrıca, div'lar arasında gezinirken metin seçimi bozulur, ancak bunun nedeni HTML ve CSS sırasının tersidir.

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

XXX ve YYY sırasıyla firstDiv ve secondDiv'in yükseklikleri. Bu, en üstteki cevabın aksine, sondaki elemanlarla çalışacaktır.

Benim tarafımdan yapılmış çok daha iyi bir kod var, sadece her iki şeyi göstermek için çok büyük ... bir 4x4 tablo oluşturmak ve dikey hizalama sadece bir hücreden daha fazla.

Herhangi bir IE kesmek kullanmaz, dikey hizalama yok: orta; hiç ...

Dikey merkezleme ekran tablosu için kullanılmaz, ekran: table-rom; Görüntülenecek: Tablo-hücre;

Bir tanesi gizli (konum doğru değil ancak üst öğenin doğru değişken boyuta sahip olmasını sağlar), biri gizli olduktan sonra görünür ancak üstte olan iki div içeren bir kabın hünerini kullanır: -50%; böylece doğru pozisyona hareket eder.

Hile yapan div sınıflarına bakın: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible

Sınıf isimleri İspanyolca kullandığınız için üzgünüm (çünkü ben ispanyolca konuşmak ve bu çok zor İngilizce kullanırsanız ben kaybolur).

Tam kod:

<?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>

Partiye biraz geç, ama bunu da yapabilirsiniz:

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

Veya öğeye mutlak bir konum belirleyin ve kenar boşluklarını nesnenin kenarından ziyade sayfanın kenarından bildirerek kaldırın. % Diğer ekran boyutları vb için daha uygun olarak kullanın. Sorunun üstesinden gelmek budur ... Teşekkürler, umarım aradığın şey ...

Yalnızca CSS çözümü için 1. Ya sargı yüksekliği sabitlenmeli ya da 2. ikinci div yüksekliği sabitlenmelidir

.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 ile kolaydır, sadece kullanın display:blockve z-indexmülkiyet

İşte bir örnek:

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;
    [...]
}

Düzenleme: Bazı ayarlamak iyidir background-coloriçin div-sdüzgün şeyleri görmeye.

Bunu yapmanın basit bir yolu var.

<!--  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;}
}