丢弃浮动 - 基本的CSS布局问题

Question

我正在努力解决一个令人沮丧的 - 深刻基本的 - CSS问题，如下图所示，以及js小提琴here。我尝试使用由百分比宽度和不同高度定义的浮动块元素来实现流体网格布局，这将线性化 - 即在某个断点处改变为width: 100%（在小提琴中）＃sa媒体查询@ 768px max-width。）请注意，我需要以一种＆＃34;编织＆＃34;的方式线性化块。两个主要的colunmns在一起，如小提琴所示。我对浮动元素有问题＆＃34;掉线＆＃34;而不是按照需要垂直对齐 - 如＃34;新闻/演讲＆＃34;在我的图表中阻止。

我已经尝试过我能找到的每个砌体类型的jquery插件，但它们似乎都没有以流畅的布局以一致或可靠的方式执行。我也知道inline-block方法，但怪癖/局限性构成了自己的问题。此外，flexbox看起来很棒，但目前有限的支持特别是这个项目的问题。

我对基于jquery的方法持开放态度 - 即强制某些块与其他块的底部对齐，但更喜欢基于CSS的块。我意识到我总是可以在＆＃34; drop＆＃34;元素，但这不是一个非常优雅的解决方案。

对此有任何帮助＆＃34;漂浮掉＃34;问题非常感谢。

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