用CSS重新排列3个div [英] rearranging 3 divs with css

问题描述

我想更改两个div的顺序. HTML:

I want to change the order of two divs. The HTML:

<div>container
<div> Navigation backwards </div>
<div> Social buttons </div>
<div> Navigation forwards </div>
</div>

在大屏幕上看起来像这样: <-[社交]->

Looks like this on a big screen: <-- [social] -->

我需要将小型(移动)设备的状态更改为:
<--->
[社交]

I need to change that for small (mobile) devices to:
<-- -->
[social]

使用纯CSS是否可能?我可以添加一些HTML并使用 display:none 解决它，但这是imo的丑陋解决方案.

Is this possible with pure css? I could just add some HTML and solve it with display: none, but that's an ugly solution imo.

推荐答案

所以@acudars是正确的...但是这里有些事情要考虑.一件事是，标记的顺序将使其难以实现...因此，通过在底部添加社交按钮，可以确保这将更容易实现.

So @acudars is right... but there's some things to consider here. One thing is that the order of your markup will make it tricky to achieve this... so by adding the social buttons at the bottom you can assure this will be easier to achieve.

我继续制作了jsFiddle:演示

I went ahead and made a jsFiddle: Demo

<div class="navCont">
  <div class="arrowPrev">&larr;</div>
  <div class="arrowNext">&rarr;</div>
  <div class="socialButtons">Social Buttons</div>
</div>

CSS

.navCont {
    background: #f6f6f6;
    border-radius: 5px;
    clear: both;
    overflow: hidden;
    padding: 5px 10px;
}

.arrowPrev {
    float: left;
}

.socialButtons {
    text-align: center;
}

.arrowNext {
    float: right;
}


@media (max-width: 320px) {
  .socialButtons {
    float: none;
    clear: both;
  }
}

因此，可以说您以320像素宽度定位移动设备...只需继续调整小提琴的大小即可看到实际效果.

So lets say that you are targeting mobile devices at 320px width... just go ahead and resize the fiddle to see this in action.

CSS非常简单，我只是添加了一些样式以使其清晰.

The CSS is very straight forward and I just added a little style to make it clear.

这篇关于用CSS重新排列3个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！