现代浏览器

Question

我的右侧和左侧有一个带有div块的标题/徽标：

  .wrap .title-area {
    position: absolute;
    top: 0;
    width: 100%
  }

<div class="wrap">
  <div class="header-left-box">
    <p>abcd-left box</p>
  </div>
  <div class="title-area">
    <p>abcd-header</p>
  </div>
  <div class="header-right-box">
    <p>abcd right box</p>
  </div>
</div>

我用30％，40％，30％宽度设计它，每个都有浮动：留下来给出我需要的结果。在缩小的屏幕尺寸上，我给每个div框100％宽度，以便它们堆叠。但是因为我想要顶部的徽标框，我给出了风格。

将标题置于顶部，但标题左侧框也位于标题下方的顶部。如何在不重叠的情况下安排那些？

Answer 1

如果我理解正确，我认为您可以使用Flexbox。指向优秀教程的链接是here。查看＆＃34;订单＆＃34;部分，因为您可以提供您希望它们如何堆叠的数字顺序。

Imgproc.calcHist(matList,new MatOfInt(0),new Mat(),histogram,new MatOfInt(25),ranges);

并非所有旧版浏览器都支持此功能。

Answer 2

此处不需要position: absolute，您可以使用Flexbox代替并使用媒体查询Fiddle

更改元素的顺序

.wrap {
  display: flex;
}
.title-area {
  flex: 4;
  background: lightblue;
}
.header-left-box,
.header-right-box {
  flex: 3;
  background: lightgreen;
}
@media(max-width: 480px) {
  .wrap {
    flex-direction: column;
  }
  .title-area {
    order: 1;
  }
  .header-left-box,
  .header-right-box {
    order: 2;
  }
}

<div class="wrap">
  <div class="header-left-box">
    <p>abcd-left box</p>
  </div>
  <div class="title-area">
    <p>abcd-header</p>
  </div>
  <div class="header-right-box">
    <p>abcd right box</p>
  </div>
</div>

Answer 3

您可以使用flex实现此目的。对于缩小的屏幕尺寸，您可以使用此

.title-area {
    order: -1 //Move the title area above the others
}

.wrap {
    display:flex;
    flex-direction: column;
}

Answer 4

要获得跨浏览器的完全支持，您可以执行以下操作：

.wrap{
  display: table;
}

.header-left-box{
  width: 100%;
}

.title-area{
  width: 100%;
  display: table-header-group;
}

.header-right-box{
  width: 100%;
}

https://jsfiddle.net/iamnottony/kpmt3Ly8/6/

Answer 5

现代浏览器

此问题的最佳解决方案是使用CSS Flexbox。您可以轻松查看caniuse.com，它实际上支持所有新浏览器（以及之前的版本！）。因此，对于这些浏览器，完整的工作解决方案是为移动版本添加三行代码：

.wrap {
    display:flex;
    flex-direction: column;
}

.title-area {
    order: -1;
}

并根据桌面版本进行相应调整。看到这个小提琴：https://jsfiddle.net/MMiszy/t4L0r15t/1/

您可以从the tutorial了解详情。

如果我需要支持旧浏览器怎么办？

但是，如果由于某种原因需要支持旧浏览器，您仍然可以使用flexbox！您甚至可以继续使用浮动桌面版本，并且只能根据需要使用flexbox调整网站的移动版本。为了支持旧浏览器，请使用名为Autoprefixer的工具。它会自动转换您的样式，并在可以使它们在旧版浏览器中运行时对其进行更改。例如，在这种情况下，display: flex;更改为

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

因此它也适用于旧版浏览器。请参阅此小提琴，例如实现。它使用浮动用于桌面和Flexbox用于移动设备：https://jsfiddle.net/MMiszy/d6paasu2/3/

使用CSS，如何更改div块的垂直顺序？

5 个答案:

现代浏览器

如果我需要支持旧浏览器怎么办？