如何正确地浮动两列与css [英] How to properly float two columns side by side with css

问题描述

这是我很久以前学到的事情之一，从来没有想过我是否真的在这样做 。

<我们假设我们有这样的结构：

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

我们还假设 wrapper 600px 。

我应该浮动 sideBar 左 c $ c> mainContent right ，或者我应该将它们都悬浮 left ？

此外，如果我为 sideBar 设置固定宽度，我如何使 mainContent 填充剩余的空间类似于表的工作原理？如果我将 mainContent 设置为 display：inline-block 和 width：100％它移动到下一行：/

注意：在我的具体情况下，我不想使用表。

解决方案

您 display：block 以及 float：left 将div彼此相邻。

检查 http上的工作示例：//jsfiddle.net/FhL4u/2/

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

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

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

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 wrapper has a width of 600px.

Should I float sideBar left, and mainContent right, or should I float them both left?

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

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

解决方案

You display:block along with float:left to float divs next to each other.

Check working example at 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.

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

这篇关于如何正确地浮动两列与css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！