本文介绍了如何正确地浮动两列与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彼此相邻。



检查



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




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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-22 17:07