How can I reorder my divs with CSS?-第3页回答

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 when they are not in that order in the HTML? Both divs contain data that varies in height and width.

<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

Hopefully it is obvious that the desired result is:

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

When the dimensions are fixed it easy to position them where needed, but I need some ideas for when the content is variable. For the sake of this scenario, please just consider the width to be 100% on both.

I am specifically looking for a CSS only solution (and it will probably have to be met with other solutions if that doesn't pan out).

There are other elements following this. A good suggestion was mentioned given the limited scenario I demonstrated -- given that it might be the best answer, but I am looking to also make sure elements following this aren't impacted.

标签： html css css3

23条回答

浮光初槿花落

2楼-- · 2018-12-31 07:16

Well, with a bit of absolute positioning and some dodgy margin setting, I can get close, but it's not perfect or pretty:

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

The "margin-top: 4em" is the particularly nasty bit: this margin needs to be adjusted according to the amount of content in the firstDiv. Depending on your exact requirements, this might be possible, but I'm hoping anyway that someone might be able to build on this for a solid solution.

Eric's comment about javascript should probably be pursued.

0人赞添加讨论(0) 举报

不流泪的眼

3楼-- · 2018-12-31 07:16

you just need this! in css float first div by left or right. float second div by left or right same as first. clear left or right same as above two div for second div. for example:

#firstDiv {
    float: left;
}

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

Have fun my friend.

0人赞添加讨论(0) 举报

栀子花@的思念

4楼-- · 2018-12-31 07:17

It is easy with css, just use display:block and z-index property

Here is an example:

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

Edit: It is good to set some background-color to the div-s to see things properly.

0人赞添加讨论(0) 举报

旧时光的记忆

5楼-- · 2018-12-31 07:21

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) 举报

旧人旧事旧时光

6楼-- · 2018-12-31 07:23

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:

0人赞添加讨论(0) 举报

听够珍惜

7楼-- · 2018-12-31 07:23

CSS really shouldn't be used to restructure the HTML backend. However, it is possible if you know the height of both elements involved and are feeling hackish. Also, text selection will be messed up when going between the divs, but that's because the HTML and CSS order are opposite.

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

Where XXX and YYY are the heights of firstDiv and secondDiv respectively. This will work with trailing elements, unlike the top answer.

0人赞添加讨论(0) 举报

How can I reorder my divs with CSS?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间