10赞

如何用CSS重新排序我的div？

作者：手机用户2402852307 | 2023-09-03 18:55

如何解决《如何用CSS重新排序我的div？》经验，为你挑选了9个好方法。

给定一个模板,由于其他要求无法修改HTML,如何在HTML中不按顺序显示(重新排列)div另一个上面的模板div？两者都div包含高度和宽度不同的数据.


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

Other elements

希望很明显,期望的结果是:

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



当尺寸固定时,很容易将它们定位在需要的位置,但是当内容变化时我需要一些想法.为了这种情况,请仅考虑两者的宽度为100%.

我特意寻找一个只有CSS的解决方案(如果不能解决的话,它可能必须满足其他解决方案). 

此后还有其他元素.鉴于我所展示的有限场景,我们提到了一个很好的建议 - 假设它可能是最好的答案,但我也希望确保后面的元素不会受到影响.


1> 小智..：
此解决方案仅使用CSS并使用可变内容

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

        
应该注意的是,这不适用于浮动.你必须设置float:none; 如果你已经有一个浮动集. 
太好了!但不适用于IE8或更低版本,但您可以为这些浏览器使用条件脚本... 
是的,这对于移动内容重新排序非常好,并且IE的关注是不可能的!考虑首先定义的菜单并显示在左侧以用于正常布局,但您希望它们显示在窄移动显示屏的底部.这很好地解决了这个问题. 
注意:`img {max-width:100%}`在重新排序的元素中不起作用. 

2> Justin..：
仅限CSS的解决方案(适用于IE10 +) - 使用Flexbox的order属性:

演示:http://jsfiddle.net/hqya7q6o/596/



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


   A
   B
   C



3> nickf..：
正如其他人所说,这不是你想要在CSS中做的事情.你可以用绝对定位和奇怪的边距来捏造它,但它不是一个强大的解决方案.在您的情况下,最好的选择是转向JavaScript.在jQuery中,这是一个非常简单的任务:

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


或更一般地说:

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

        
有时最好屈服于那些更强大的人.在这种情况下,这感觉更优雅,你是真正的控制.出于这个原因,我觉得这更整洁,更好. 

4> BlakePeterse..：
这可以使用Flexbox完成. 

创建一个同时应用display:flex和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;
}


  
  

     first

  
  
  

    second

  
  



5> Matt Howell..：
在支持pre-flexbox用户代理(主要是旧的IE)时,绝对没有办法通过CSS实现你想要的东西- 除非:


您知道每个元素的确切渲染高度(如果是这样,您可以绝对定位内容).如果你正在处理动态生成的内容,那你就不走运了.
你知道这些元素的确切数量.同样,如果你需要为动态生成的几个内容块执行此操作,那么运气不好,特别是如果有超过三个左右的内容.


如果以上都是真的那么你可以通过绝对定位元素来做你想要的 - 

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


再说一遍,如果你不知道至少#firstDiv的高度,你无法通过CSS单独做你想做的事.如果这些内容中的任何内容是动态的,您将必须使用javascript.

        

6> buti-oxa..：
这是一个解决方案:


    

    
        
            
            
                
                    
                
            

            
                手机用户2402852307            

            
                这个屌丝很懒，什么也没留下！            
            
            

                                
                    
                    关注作者
                            

        
    


    
        Tags | 热门标签
        
            
                                
                    actionscrip
                
                                
                    bash
                
                                
                    c#
                
                                
                    c++
                
                                
                    c语言
                
                                
                    erlang
                
                                
                    flutter
                
                                
                    go
                
                                
                    golang
                
                                
                    java
                
                                
                    javascript
                
                                
                    lua
                
                                
                    node.js
                
                                
                    perl
                
                                
                    php
                
                                
                    python
                
                                
                    scala
                
                                
                    typescript
                
                                
            
        
    


    
        RankList | 热门文章
        
            
                                
                    1使用Singleton模式的Android Volley错误
                
                                
                    2有没有办法截断字段数据
                
                                
                    3如何在vim中将命令的输出打印到新窗口
                
                                
                    4'缺少PFX或证书+私钥.' 在https socket.io中
                
                                
                    5如何让kestrel Web服务器监听非localhost请求？
                
                                
                    6更改ui.bootrap的工具提示箭头的颜色(附带的plunker)
                
                                
                    7Stanford NER Tagger在NLTK
                
                                
                    8Phaser:如何在预加载后加载资产？
                
                                
                    9键入表示非空的字符串或F#中的空格
                
                                
                    10如何正确使用dataLayer.push（）更新数组中嵌套对象的值？
                
                                
                    11无法使用bootstrap-sass与webpack一起工作
                
                                
                    12Django上的用户角色架构
                
                                
                    13使用Multibranch Workflow清理构建
                
                                
                    14如何告诉Gradle始终使用--console = plain？
                
                                
                    15在C++ 11中使用shared_from_this()而不使用托管共享指针
                
                                
                    16在git rebase期间找到分支名称
                
                                
                    17从C++ std :: vector中的线程中启动可运行对象
                
                                
                    18Android Studio更新破坏了我的模拟器
                
                                
                    19Scikit Learn Multilabel分类:ValueError:您似乎正在使用传统的多标签数据表示
                
                                
                    20无法在AsyncTask中访问"findViewById"







    DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6 

    Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved  devBox.cn 开发工具箱  版权所有