丢弃浮动——基本的 CSS 布局问题答案

【问题标题】：Dropping floats-- basic CSS layout issue丢弃浮动——基本的 CSS 布局问题
【发布时间】：2015-08-09 22:38:45
【问题描述】：

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

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

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

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

【问题讨论】：

将.item.w1 从float: left 更改为display: inline-block; 似乎可以解决问题，但是您提到了这种方法的“怪癖/限制”？ jsfiddle.net/7Lc7ofm6
@RickHitchcock 他可能意味着将内联块应用于.w1 和.w2。但是是的，我认为您的解决方案没有问题
@zgood - 是的，我指的是对所有元素使用 inline-block，但还没有尝试过仅用于左浮动元素（即item.w1）。谢谢，我会在我的网站上试一试。

标签： jquery html css css-float fluid-layout

【解决方案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

【讨论】：

谢谢瑞克，我会试一试并报告。我在使用inline-block 而不是float 进行布局时提到的“怪癖/限制”详细说明here；但是，正如我上面提到的，我没有尝试将它仅用于某些元素，而将 float 保留在其他元素上。我会把它应用到我的项目中，看看会发生什么。感谢您的帮助。