jQuery 如何使用css并排正确浮动两列

How to properly float two columns side by side with css

提问by The Muffin Man

This is one of those things I learned a long time ago and never thought much about if I was actually doing it the rightway.

这是我很久以前学到的东西之一，从来没有想过我是否真的以正确的方式去做。

Let's say we have a structure like so:

假设我们有一个这样的结构：

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

Let's also say that wrapperhas a width of 600px.

我们也假设它wrapper的宽度为600px。

Should I float sideBarleft, and mainContentright, or should I float them both left?

我应该浮动sideBarleft，并且mainContentright，还是应该同时浮动它们left？

Additionally, if I set a fixed width for sideBarhow can I make mainContentfill up the rest of the space similar to how a table works? If I set mainContentto display:inline-blockand width:100%it moves down onto the next line :/

此外，如果我为sideBar如何mainContent填充其余空间设置了固定宽度，类似于表格的工作方式？如果我设置mainContent为display:inline-block并且width:100%它向下移动到下一行：/

Note: In my specific scenario I do not want to use a table.

注意：在我的特定场景中，我不想使用表格。

回答by Hussein

You display:blockalong with float:leftto float divs next to each other.

您display:block可以float:left将 div 彼此相邻浮动。

Check working example at http://jsfiddle.net/FhL4u/2/

在http://jsfiddle.net/FhL4u/2/检查工作示例

To make mainContent fill up rest of the space if only the first div width is known then use percentages on both sideBar and mainContent ex: 20% 80% instead of using fixed width. otherwise you will need a JavaScript solution to achieve a cross browser compatibility.

如果只知道第一个 div 宽度，要使 mainContent 填充其余空间，然后在 sideBar 和 mainContent 上使用百分比，例如：20% 80% 而不是使用固定宽度。否则，您将需要一个 JavaScript 解决方案来实现跨浏览器兼容性。

Check jQuery solution at http://jsfiddle.net/FhL4u/3/

在http://jsfiddle.net/FhL4u/3/检查 jQuery 解决方案

回答by thirtydot

I'm modifying my answer from here: How to make an inline-block element fill the remainder of the line?

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

• Only #sideBaris floated.
• You can't really tweak this technique to have equal height columns later on, so that's why I asked before answering. (well, you can, but you need to use a background-imagefor faux columns)

• 只有#sideBar浮动。
• 以后您无法真正调整此技术以具有相同高度的列，所以这就是我在回答之前询问的原因。（好吧，你可以，但你需要使用 a background-imagefor faux columns）

See: http://jsfiddle.net/qx32C/37/

见：http: //jsfiddle.net/qx32C/37/

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

---

---

Why did I replace margin-left: 100pxwith overflow: hiddenon #mainContent?

为什么我margin-left: 100px用overflow: hiddenon替换#mainContent？

回答by Kent

using float left or right is not important. you have wrapper with the width of 600px. when you using float for both sidebar and contain inside the wrapper, you must make sure that the width of sidebar and contain (including margin and padding) equal or less than 600px. If not, the second element will be below the first one. Hope this helps ^^

使用向左或向右浮动并不重要。你有宽度为 600px 的包装器。当您对侧边栏和包含在包装器内使用浮动时，您必须确保侧边栏和包含的宽度（包括边距和填充）等于或小于 600 像素。如果不是，则第二个元素将低于第一个元素。希望这有帮助^^

回答by Mike Tavish

use display:flexfor two div floats side-by-side

display:flex并排使用两个 div 浮动

#wrapper {
    width: 600px;
    display: flex;
}
#sideBar {
    display: inline-flex;
    width: 25%;
}
#mainContent {
    width: 75%;
    flex: 1;
}