在同一行上组成div

Question

我正在建立一个网站，但我遇到了问题。

我有一个组成的div：

<div id="content">
<div id="left">
    <div id="leftcontent">...</div>
</div>
<div id="center">
    <div id="centercontent">...</div>
</div>
<div id="right">
    <div id="rightcontent">...</div>
</div>

如何将左，中，右放在同一行？

我应该添加哪些代码？

谢谢！

Answer 1

您可以使用float css属性，如：

#left   { float: left }
#center { float: left }
#right  { float: right }

Answer 2

你为什么使用div？ div有块的显示，但是跨度会更好，因为它是内联的，然后Ivan建议的float属性可以正常工作。

Answer 3

这个CSS应该可以解决问题：

#left {
  width: 20%;
  float: left;
}

#center {
  width: 60%;
  float: left;
}

#right {
  width: 20%;
  float: left;
}

根据需要调整宽度。

Answer 4

另一种方法是使用css网格框架。以下是一些受欢迎的：

1. http://960.gs/
2. http://www.blueprintcss.org/
3. http://developer.yahoo.com/yui/grids/

我最喜欢的是：Object Oriented CSS

建议使用基于CSS的网格系统，因为它们经过了很好的测试，无法在多个浏览器中使用。

一个可能的负面影响是，您必须以特定于您选择的框架的方式构建标记。

Answer 5

其他评论回答了你的问题，但请注意你没有开始下降到div hell ... div只做包含div可能是代码气味。