css - 两个带边框的全屏 float

Question

我正在设计一个带有两个 float 栏的网站，我想将其填满整个屏幕。

#column_main{ 
      position:relative;
      background:#ffffff;
      float:left;
      width:70%;
      height:auto;
      min-height:550px;
}
#column_side{
     position:relative;
     background:#dbdada;
     float:left;
     width:30%;
     height:auto;
     min-height:550px;
}

如果我有以下行到#column_main

 border-left:solid 1px #c0c1c4;

漂浮物弄乱了，它们不再并排。

在 IE 中，我已经能够通过将 #column_main 宽度设置为 auto 来解决这个问题，它会填充页面的其余部分。这在 firefox 中不起作用，我尝试稍微降低百分比，但这会在#column_main 和页面右边缘之间留下间隙。有没有办法让 1px 边框位于左侧并使 float 填充屏幕的其余部分。

Answer 1

float 不再有效，因为边框被添加到宽度而不是包含在宽度中的框模型，您已经通过 width:70% 和 width: 30% 用完了 100% 的宽度。

如果您计划应用边框，您可能希望将它应用到其中一个环绕 float 列内的子元素，并将这些父列仅用作网格系统来构建您的其他内容。

或者尝试 bootstrap grids