How can I reorder my divs using only CSS?

后端 未结 24 1115
傲寒
傲寒 2020-11-22 01:53

Given a template where the HTML cannot be modified because of other requirements, how is it possible to display (rearrange) a div above another div

相关标签:
24条回答
  • 2020-11-22 02:18

    Little late to the party, but you can also do this:

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

    0 讨论(0)
  • 2020-11-22 02:18

    For CSS Only solution 1. Either height of wrapper should be fixed or 2. height of second div should be fixed

    0 讨论(0)
  • 2020-11-22 02:19

    This can be done using Flexbox.

    Create a container that applies both display:flex and flex-flow:column-reverse.

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

    Sources:

    • https://css-tricks.com/using-flexbox/
    • https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow#Browser_compatibility
    0 讨论(0)
  • 2020-11-22 02:19
    .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;
    }
    
    0 讨论(0)
  • 2020-11-22 02:22

    I have a much better code, made by me, it is so big, just to show both things... create a 4x4 table and vertical align more than just one cell.

    It does not use any IE hack, no vertical-align:middle; at all...

    It does not use for vertical centering display-table, display:table-rom; display:table-cell;

    It uses the trick of a container that has two divs, one hidden (position is not the correct but makes parent have the correct variable size), one visible just after the hidden but with top:-50%; so it is mover to correct position.

    See div classes that make the trick: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible

    Please sorry for using Spanish on classes names (it is because i speak spanish and this is so tricky that if i use English i get lost).

    The full code:

    <?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>
    
    0 讨论(0)
  • 2020-11-22 02:23

    I have a simple way to do this.

    <!--  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;}
    }
    
    0 讨论(0)
提交回复
热议问题