Content to be below in this situation
Content to be above in this situation" />

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

332769 观看

24回复

1302 作者的声誉

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

<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的解决方案(如果不能解决的话,它可能必须满足其他解决方案)。

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

作者: devmode 的来源 发布者: 2008 年 10 月 20 日

回应 (24)


4

11940 作者的声誉

好吧,有一点绝对定位和一些不确定的保证金设置,我可以接近,但它不完美或漂亮:

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

“margin-top:4em”是特别讨厌的位:需要根据firstDiv中的内容量调整此边距。根据您的具体要求,这可能是可能的,但我希望无论如何有人可能能够在此基础上建立可靠的解决方案。

应该追求Eric关于javascript的评论。

作者: Bobby Jack 发布者: 20.10.2008 11:38

5

28115 作者的声誉

如果你知道,或者可以强制执行to-be-upper元素的大小,你可以使用

position : absolute;

在你的CSS和divs他们的位置。

否则javascript似乎是唯一的出路:

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

或类似的东西。

编辑:我刚发现这可能有用:w3文件css3 move-to

作者: Kris 发布者: 20.10.2008 11:40

76

374584 作者的声誉

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

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

或更一般地说:

$('.swapMe').each(function(i, el) {
    $(el).insertBefore($(el).prev());
});
作者: nickf 发布者: 20.10.2008 11:45

16

9066 作者的声誉

这是一个解决方案:

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

但我怀疑你有一些内容跟随包装div ...

作者: buti-oxa 发布者: 20.10.2008 11:46

5

4597 作者的声誉

负顶部边距可以实现此效果,但需要为每个页面定制它们。例如,这个标记......

<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,那么这可能是一个选项。

作者: Carl Camera 发布者: 22.10.2008 02:05

-1

194 作者的声誉

CSS实际上不应该用于重构HTML后端。但是,如果您知道所涉及的两个元素的高度并且感觉到hackish是可能的。此外,文本选择将在div之间进行混乱,但这是因为HTML和CSS顺序相反。

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

其中XXX和YYY分别是firstDiv和secondDiv的高度。与顶部答案不同,这将与尾随元素一起使用。

作者: user65952 发布者: 14.02.2009 08:38

26

13101 作者的声誉

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

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

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

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

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

作者: Matt Howell 发布者: 14.02.2009 10:45

-3

7503 作者的声誉

对于CSS Only解决方案1.应该固定包装器的高度或2.固定第二个div的高度

作者: KoolKabin 发布者: 01.06.2010 01:15

3

64 作者的声誉

你需要这个!在css中,向左或向右浮动第一个div。向左或向右浮动第二个div与第一个相同。清除左或右与上面两个div相同的第二个div。例如:

#firstDiv {
    float: left;
}

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

玩得开心我的朋友。

作者: Reza Amya 发布者: 13.02.2011 12:15

-2

5 作者的声誉

或者为元素设置绝对位置,并通过从页面边缘而不是对象边缘声明它们来处理边距。使用%作为更适合其他屏幕尺寸等。这就是我克服这个问题的方式......谢谢,希望它能满足您的需求......

作者: Tom Denley 发布者: 15.07.2011 05:49

-1

1001 作者的声誉

我有一个更好的代码,由我制作,它是如此之大,只是为了显示两件事...创建一个4x4表和垂直对齐不仅仅一个单元格。

它不使用任何IE hack,没有vertical-align:middle; 一点都不...

它不用于垂直居中显示表,显示:table-rom; 显示:表细胞;

它使用具有两个div的容器的技巧,一个隐藏(位置不正确但使父级具有正确的可变大小),一个隐藏在隐藏之后但是顶部可见:-50%; 因此,纠正位置是动力。

请参阅制作技巧的div类:BloqueTipoContenedor BloqueTipoContenedor_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>
作者: z666zz666z 发布者: 22.09.2011 12:35

258

3145 作者的声誉

解决方案仅使用CSS并使用可变内容

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }
作者: Jordi 发布者: 22.08.2012 08:56

-4

323 作者的声誉

使用css很简单,只需使用display:blockz-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-colordiv-s正确看待事物。

作者: Pmillan 发布者: 11.11.2012 02:26

2

37 作者的声誉

我一直在寻找一种方法来改变移动版本的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
});
作者: Jose Paitamala 发布者: 28.06.2013 11:56

32

902 作者的声誉

这可以使用Flexbox完成。

创建一个同时应用display:flexflex-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>

资料来源:

作者: BlakePetersen 发布者: 13.06.2014 10:59

-3

1 作者的声誉

.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;
}
作者: K.Kutschera 发布者: 09.01.2015 01:33

164

16528 作者的声誉

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

作者: Justin 发布者: 26.01.2015 10:17

-4

1 作者的声誉

我有一个简单的方法来做到这一点。

<!--  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;}
}
作者: Gian Miller 发布者: 29.01.2015 04:48

3

2480 作者的声誉

这只能用CSS完成!

请检查我对这个类似问题的回答:

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

我不想双重发布我的答案,但缺点是父母需要成为一个flexbox元素。例如:

(此处仅使用webkit供应商前缀。)

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

然后,通过指示他们的顺序来交换div:

#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;
}
作者: jansmolders86 发布者: 21.05.2015 05:05

7

1425 作者的声誉

使用CSS3 flexbox布局模块,您可以订购div。

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

<div id="wrapper">
  <div id="firstDiv">
    Content1
  </div>
  <div id="secondDiv">
    Content2
  </div>
</div>
作者: Arun Kumar M 发布者: 21.10.2015 09:19

0

9 作者的声誉

只需通过指定display: flex和使用flex作为父div flex-direction : column。然后使用order来确定哪个子div首先出现

作者: MUSTAPHA ABDULRASHEED 发布者: 17.08.2016 07:03

2

2264 作者的声誉

具有更大浏览器支持的解决方案然后是flexbox(在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任何数量的儿童。

作者: Finesse 发布者: 22.09.2016 01:21

-1

424 作者的声誉

派对不多,但你也可以这样做:

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

作者: lsrom 发布者: 09.03.2017 10:43

0

1 作者的声誉

这很简单。它可以用css命令完成。我已经通过使用css和bootstrap-4找到了完整的教程。所以你可以去这里结账 - 使用CSS更改订单

作者: vijay chauhan 发布者: 26.02.2019 10:41
32x32