Question

要求：

在响应模式下，底部框必须位于底部，中间位于中间，顶部位于顶部
在桌面模式下，底部框必须位于左侧
没有javascript
父母的身高必须是最大孩子的身高（所以没有绝对定位）

你可以看到，当小提琴现在站立时，当你减小窗户的宽度时，底部会停留在顶部。如何才能通过HTML / CSS实现上述目标？

.parent {
  border: 1px solid blue;
  overflow: hidden;
}
.random-height {
  height: 200px !important;
}
.child {
  height: 100px;
  width: 30%;
  border: 1px solid red;
  float: left;
}
@media (max-width: 500px) {
  .child {
    width: 100%;
  }
}
}

<div class="parent">
  <div class="child random-height">bottom</div>
  <div class="child">middle</div>
  <div class="child">top</div>
</div>

Answer 1

我能够通过将以下内容应用于父级和子级来实现此目的，但似乎...... 错误？ https://jsfiddle.net/pqbu2d70/1/

    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

Answer 2

而不是float使用table-cell然后在回复时将其更改为table-row，但将您想要的那个放在底部table-footer-group。

您也可以使用table-header-group

反向使用此技术

另外，不要使用!important，而是将覆盖的CSS置于级联的下方。

Fiddle

＆＃13;

.parent {
  border: 1px solid blue;
  display: table;
  width: 100%;
  table-layout: fixed;
}
.child {
  width: 100%;
  display: table-cell;
  vertical-align: top;
}
.inside {
  border: 1px solid red;
  height: 100px;
}
.random-height {
  height: 200px;
}
@media (max-width: 500px) {
  .child {
    display: table-row;
    width: 100%;
  }
  .parent .child:first-child {
    display: table-footer-group;
  }
  .parent .child:last-child {
    display: table-header-group;
  }
}
}

＆＃13;

<div class="parent">
  <div class="child">
    <div class="inside random-height">bottom</div>
  </div>
  <div class="child">
    <div class="inside">middle</div>
  </div>
  <div class="child">
    <div class="inside">top</div>
  </div>
</div>

＆＃13;

Answer 3

我相信你最好的选择是使用direction。将父级更改为rtl（从右到左），并在子级中将其重置为initial。

为了让它起作用而不是浮动，您需要将子项设置为inline-block元素。

我还没有解决每个边距/填充问题，但它会是这样的：

Updated Fiddle

＆＃13;

.parent {
    border: 1px solid blue;
    overflow: hidden;
    direction: rtl;
}

.random-height{
    height: 200px !important;
    
}

.child {
    height: 100px;
    width: 30%;
    border: 1px solid red;
    display: inline-block;
    direction: initial;
}
@media (max-width: 500px) {

    .child {
        width: 100%;
    }
}

＆＃13;

<div class="parent">
    <div class="child">top</div>
    <div class="child">middle</div>
    <div class="child random-height">bottom</div>
</div>

＆＃13;

反转浮动元素的堆栈顺序

3 个答案: