Question

就我而言，我的HTML看起来更像是这样：

<div class="container">
    <div class="gallery">
        <div class="image-wrap"> stuff </div>
        <div class="thumbnails"> stuff </div>
    </div>
    <div class="info"> stuff </div>
</div>

我希望.thumbnails和.info可以直观地切换位置，但不会影响其他任何内容的样式或位置。 .gallery中的所有html（以及大部分css）都是由我无法编辑的插件生成的。

这是你可以假设的造型：

.thumbnails {
    width: 100%;
    height: 100px;
}

.info {
    width: 100%;
    min-height: 125px; 
}

我考虑过使用绝对定位，但.info的高度可变，因为它的内容长度可变。

我更喜欢纯CSS解决方案，但如果有必要，我会接受jQuery / JS解决方案。

Answer 1

如果.info已知height，那么您可以使用float属性和行为来欺骗它：

.thumbnails {
  float:left;
  clear:left;
  width:100%;
}
.gallery:before {
  content:'';
  float:left;
  height:130px;/* this should be the height and margins used by .info .... but js do not access pseudo element */
}
.info {
  height:100px;
  display:flex;
  border:solid tomato;
  justify-content:center;
  align-items:center;
  background:turquoise;
  color:white;
  font-size:2em;
  }

<div class="container">
  <div class="gallery">
    <div class="image-wrap"> image-wrap </div>
    <div class="thumbnails"> thumbnails </div>
  </div>
  <div class="info"> info </div>
</div>

codepen to play with

Answer 2

您可以使用flexbox重新排序Flex项目，display: contents可以使所有元素都参与相同的Flex格式化上下文。

.container {
  display: flex;
  flex-direction: column;
}
.gallery {
  display: contents;
}
.thumbnails {
  height: 100px;
  order: 1;
}
.info {
  min-height: 125px; 
}

<div class="container">
  <div class="gallery">
    <div class="image-wrap"> image-wrap </div>
    <div class="thumbnails"> thumbnails </div>
  </div>
  <div class="info"> info </div>
</div>

目前，只有Firefox支持display: contents。

Answer 3

是的，所以我不认为你能用css实现这个目标，因为你想要真正改变结构......这里肯定需要Javascript：

db.currentOp().count()

希望这有帮助！

重新排序不是兄弟姐妹的Div

3 个答案: