jquery - Dropping floats——基本的CSS布局问题

Question

我正在努力解决一个令人沮丧且极其基础的 CSS 问题，下图和一个 js fiddle here 说明了这一点.我正在尝试使用由百分比宽度和不同高度定义的 float block 元素实现流体网格布局，这将线性化 - 即在某个断点处更改为 width: 100%(在 fiddle 中有媒体查询@ 768px max-width。)请注意，我需要 block 以将两个主要列“编织”在一起的方式进行线性化，如 fiddle 所示。我遇到了 float 元素“掉落”并且没有按要求垂直对齐的问题——如我图表中的“新闻/演讲” block 所示。

我已经尝试了所有我能找到的砖石结构类型的 jquery 插件，但似乎没有一个能够以一致或可靠的方式执行流畅的布局。我也知道 inline-block 方法，但怪癖/限制带来了自己的问题。此外，flexbox 看起来很棒，但当前有限的支持对这个元素来说尤其是个问题。

我对基于 jquery 的方法持开放态度——即强制某些 block 与其他 block 的底部对齐，但更喜欢基于 css 的方法。我意识到我总是可以对“下降”元素应用负边距，但这不是一个非常优雅的解决方案。

非常感谢任何有关此“ float 下降”问题的帮助。

Answer 1

我不确定您在使用 inline-block 时遇到了什么“怪癖/限制”，但是如果您仅将它应用于 .item.w1，它似乎有效。

您还需要在此处删除 float: none:

@media only screen 
and (max-width : 768px) 
and (orientation : portrait) {
  .item.w1, .item.w2 {
    float: none;
    width: 100%;
  }
}

Fiddle