父级 div 下的位置 div

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 个块显示在 1 行中。 row-1 div 的 content div 必须显示在块的第一行下方。下一个块 is/are 位于所有这些下方。

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

我该如何解决这个问题？

谢谢！

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

Position div under parent div

html

css

css-position