代码之家 › 专栏 › 技术社区 › ItFreak

CSS不带flex更改div顺序

css html

ItFreak · 技术社区 · 7 年前

给定的HTML为:

<div class="class">1</div>
<div class="class">2</div>
<div class="class">3</div>
<div class="class">4</div>

我知道我能做一件事 display:flex

.class :nth-child(1) { order: 2 }
.class :nth-child(2) { order: 4 }
.class :nth-child(3) { order: 1 }
.class :nth-child(4) { order: 3 }

它应该产生

<div class="class">3</div>
<div class="class">1</div>
<div class="class">4</div>
<div class="class">2</div>

有没有一种方法可以做到这一点,而不必将flexbox与其order属性结合使用?

3 回复 | 直到 7 年前

Vucko 7 年前

可以使用栅格布局,它具有类似的顺序属性。

.boxes {
  display: grid;
}

.class:nth-of-type(1) {
  order: 2;
}

.class:nth-of-type(2) {
  order: 4;
}

.class:nth-of-type(3) {
  order: 1;
}

.class:nth-of-type(4) {
  order: 3;
}

<div class="boxes">
  <div class="class">1</div>
  <div class="class">2</div>
  <div class="class">3</div>
  <div class="class">4</div>
</div>

Irina 7 年前

你可以用 left 和 float: left;

.class {
    position: relative;
    float: left;
    width: 25%;
   }

  .class:nth-child(1) {
    left: 75%;
  }

  .class:nth-child(2) {
    left: 25%;
  }

  .class:nth-child(3) {
    left: -25%;
  }

  .class:nth-child(4) {
    left: -75%;
  }

Mr Lister hawi 7 年前

.container {display: table;}
.class {display: table-row;}
.class:nth-child(3) {display: table-header-group;}
.class:nth-child(2) {display: table-footer-group;}

<div class="container">
  <div class="class">1</div>
  <div class="class">2</div>
  <div class="class">3</div>
  <div class="class">4</div>
</div>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前