Question

这个问题：CSS: how to get two floating divs inside another div 显示了如何在固定宽度的右侧获得一个可变宽度框。

但是，我们有

#left_menu {
    width: 150px;
    float: left;
}

#content {
    margin-left: 170px;   /* must be kept as left_menu.width+20 */
    border: 1px solid white;
}

如果我们改变left_menu的宽度，并且忘记margin-left应该是+20，那么事情就会变坏。

在CSS中跟踪这些布局依赖关系的最佳做法是什么？

Answer 1

（可能）最佳解决方案是使用CSS预处理器，例如SASS。您可以执行非常简单的变量赋值和计算，例如：

$leftMenuWidth: 150px;

#left_menu {
    width: $leftMenuWidth;
    float: left;
}

#content {
    margin-left: $leftMenuWidth + 20;   /* must be kept as left_menu.width+20 */
    border: 1px solid white;
}

CSS calc()即将到来，但这并不是你想要做的。

另一种解决方案，取决于您的浏览器兼容性要求是flexbox。您可以将固定宽度+流体宽度元素混合在一起，让浏览器为您计算布局。 Flexbox也可以做得更多，但这是另一个问题。阅读我在CSS-tricks上链接的指南，以获得良好的概述。

Answer 2

您可以将margin添加到内容，并在浮动元素上设置#content，而不是在overflow-x: hidden;元素上使用margin-right

#left_menu {
  width: 150px;
  float: left;
  margin-right: 20px;  /* <-- push the content to the right */
  background-color: orange;
}

#content {
  overflow-x: hidden;  /* <-- prevent from wrapping */
  background-color: gold;
}

<强> JSBin Demo

如何管理CSS布局依赖？

2 个答案: