Css “浮动包装”；太晚了”；

我正在尝试制作一个单选按钮响应网格，在其左侧有一个标签“column”。使用下面的HTML和CSS，使窗口变窄最终会导致收音机按预期换行为两列，然后换行为一列。然而，直到他们的大部分文本都在屏幕右侧，这种情况才会发生

浏览器似乎认为.controlContainer的右边缘位于错误的位置，与左侧标签“列”的宽度相差大约。在FirefoxESR 31.4.0、Chrome 40.0.2214.115 m和IE 11中也出现了同样的行为，因此这似乎不是一个浏览器错误

下面的示例代码包含了一个复选框，该复选框应用了一个非常时髦的解决方法，确实有效，但我希望有人能为我指出一个不需要这种胡说八道的方向

正如在注释掉的CSS中所指出的，将position:absolute应用于.controlContainer而不是给定的变通方法也可以，但是随后它周围的元素会在它上面折叠，因为它不占用任何空间

请注意，由于运行代码片段工具本身的CSS和嵌入式iframe的限制大小，此处的运行代码片段工具无法正确显示此内容，因此您需要将代码复制到本地文件中，或者

漂浮包装
*，*：之后，*：之前{-moz框大小：边框框；-ms框大小：边框框；-webkit框大小：边框框；框大小：边框框；}
正文、窗体、pre、div、span、标签{字体系列：无衬线；字体大小：13px；边距：0；填充：0；}
.fieldContainer{空白：nowrap；}
.labelContainer{显示：内联块；字体大小：粗体；文本对齐：右侧；垂直对齐：顶部；宽度：150px；}
.controlContainer{显示：内联块；最大宽度：800px；}
.controlContainer标签{float:left；padding right:10px；width:200px；}
.controlGridText{显示：内联块；边距：0 2.25em 5px 0；空白：正常；}
输入{float:left；}
.hackyFix.controlContainer{left:-150px；左边距：150px；位置：相对；}
/*.hackyFix.controlContainer{position:absolute；}可以执行此操作，而不是执行上面的hack操作，但是其他元素会塌陷到它的空间中*/
/*.hackyFix.fieldContainer{overflow:hidden；}隐藏水平滚动条，但不必这样做*/
让窗口变窄，最终收音机会变成两列，然后是一列。
然而，直到他们的大部分文本都在屏幕右侧，这种情况才会发生。
还要注意，水平滚动条在实际需要之前出现。
选中“Apply hacky fix”框，我发现的唯一解决方案得到了应用，但它非常时髦，并且没有修复滚动条。
有关其他注释，请参见注释掉的CSS。
欢迎提供更好的解决方案！

应用黑客补丁

最喜欢的蜥蜴
1只同侧壁虎
2多洛·希特·阿梅特
3只鬣蜥
4变色龙在威尼斯同侧的库拉比图拉特元素
5 Morbi id elit massa酒店
6佩伦茨克·拉奥里特拍卖行
7蛇怪
8 Tuatara quam enim ornare urna
9 Suscipit faucibus nunc dolor vel arcu
这是更多的文本，这里只是为了看看字段下面的对象发生了什么。
document.getElementById（'cbHack'）。checked=false；

。示例中的一个问题是它没有使用现代框架所基于的，这意味着填充被添加到元素的外部而不是内部。这使得基于百分比的网格在未启用时难以使用

我通过包含引导css修补了你的版本，但你真的只需要盒子模型来修复它。这是我更改的另一部分：

---

这样做会抵消“最喜欢的蜥蜴”标签。如果我是你的话，我会切换到基于百分比的网格，这样做会容易得多。父容器可以有一个3列和9列的网格，而标签在大屏幕上是3列网格，在中屏幕上是2列网格，在小屏幕上是1列网格。

签出CSS媒体查询。。。它可能会做你想让它做的事情，但我的感觉是，一些意想不到的事情正在发生，一些我需要理解的事情，希望在达到这个水平之前能够抵消它。问题不在于我希望布局随窗口宽度而改变，而是我希望包裹行为与可见情况相匹配，而目前情况并非如此。多亏了Austin，原来的盒子模型规则，现在添加到这里和CSSDeck上，与预期没有太大区别。是calc（）规则让你的小提琴工作，而不是盒子模型或引导；添加/删除它们以证明这一点。Pct和calc都能很好地工作，你说得对。不愿意在公共网站上使用w calc——老的IE和手机问题，pct是一个问题，因为我的“用户”可以在CSS之外的px中定义标签宽度，这不是CSS问题，而是真实的问题。似乎。controlContainer需要宽度（不仅仅是最大宽度），或者位置：绝对。没办法防止腹肌崩溃，对吧？其他方法？

.controlContainer {
    max-width: 800px;
    width: calc(100% - 105px);
}