如何用css正确地浮动两列并排的位置[英] How to properly float two columns side by side with css

本文是小编为大家收集整理的关于如何用css正确地浮动两列并排的位置的处理方法,想解了如何用css正确地浮动两列并排的位置的问题怎么解决?如何用css正确地浮动两列并排的位置问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

这是我很久以前学到的东西之一,从来没有考虑过我是否真的在做 right Way.

假设我们有这样的结构:

<div id="wrapper">
  <div id="sideBar"></div>
  <div id="mainContent"></div>
</div>

我们还说wrapper的宽度为600px.

我应该浮动sideBar left和mainContent right,还是应该浮动它们两个left?

此外,如果我为sideBar设置了一个固定宽度>如何使mainContent填充其余空间类似于表的工作方式?如果我将mainContent设置为width:100%和width:100%它将向下移动到下一行:/

注意:在我的具体情况下,我不想使用表.

推荐答案

you display:block以及float:left彼此相邻浮动.

http://jsfiddle.net/fhl4u/2/

使主以填充其余空间,如果只有第一个div宽度才知道,则在侧栏和主偏见EX上都使用百分比:20%80%而不是使用固定宽度.否则,您将需要JavaScript解决方案来实现交叉浏览器的兼容性.

http://jsfiddle.net/fhl4u/3/

其他推荐答案

我正在从这里修改答案:如何使内联块元素填充该行的其余部分?

  • 只有#sideBar浮动.
  • 您无法真正调整此技术以稍后使用相等的高度列,所以这就是为什么我在回答之前问的原因. (好吧,您可以,但是您需要使用background-image faux columns )

请参阅: http://jsfiddle.net/qx32c/37/

#wrapper {
    overflow: hidden; /* clear the float */
}
#sideBar {
    width: 100px;
    float: left;
    background: #f0f
}
#mainContent {
    overflow: hidden;
    background: #ccc
}

我为什么要替换使用overflow: hidden on #mainContent?

其他推荐答案

使用左右的浮子并不重要. 您的包装器的宽度为600px. 当您在两个侧边栏上使用Float并在包装器内部包含时,必须确保侧边栏的宽度并包含(包括边距和填充)等于或小于600px. 如果没有,第二个元素将低于第一个元素. 希望这对^^

有帮助

本文地址:https://www.itbaoku.cn/post/565927.html