Question

我有这样的布局（简化）：

<div class="row row-1">
  <div class="block">block title 1</div>
  <div class="content">Content of the 1st block</div>
</div>
<div class="row row-2">
  <div class="block">Block title 2</div>
</div>
<div class="row row-3">
  <div class="block">Block title 3</div>
</div>
<div class="row row-4">
  <div class="block">Block title 4</div>
</div>

我的CSS（响应式设计）

.row {
  width: 49%;
  float: left;
  display: block;
  border: 1px solid black;
}
@media screen and (min-width: 768px) {
  .row {
    width: 32%;
  }
}

前两个块在小屏幕上彼此相邻显示，对于较大的屏幕，3个块显示在一行中。 content div的row-1 div必须显示在第一行块下面。下一个块位于所有这些之下。

我尝试在position:absolute; div上使用content，但之后它位于页面流之外。内容与下一个块重叠。内容将是可变的，因此固定高度（以及下一个div的固定margin-top）是没有选择的。

我该如何解决这个问题？

谢谢！

Answer 1

float:left正在扼杀这个。通常作为经验法则，您应该只使用CSS float作为最后的手段，因为它经常会引入与其他浮动元素的不需要的交互。

设置display: inline-block和vertical-align: top。这将导致块保持其块形状，但仍像文本一样流动。

JSFiddle处的示例。

.row {
  width: 49%;
  display: inline-block;
  border: 1px solid black;
  vertical-align: top;
}
@media screen and (min-width: 768px) {
  .row {
    width: 32%;
  }
}

Answer 2

虽然Ryan Muller很有用，但你也可以使用flexbox。

FIDDLE

我将所有内容都包装在一个<section class="flex">

中

重新发送CSS

    .flex { 
       display: flex; 
    }

    @media screen and (max-width: 768px) {
    .flex { 
       display: flex;
       flex-flow: column wrap; 
     }
   }

注意：我将您的媒体查询从min-width: 768px更改为max-width: 768px，前提是您打算使用移动设备。

在父div下定位div

2 个答案: