Question

之前，我正在使用<table>将我的页面布局拆分为3个部分，左侧边栏，右侧边栏和右侧边栏。主要中心面板。现在，在了解了过度使用/误用<table>的缺点之后，我想避免为此目的而使用表格。我希望以这样的方式设置这3个div的样式，使它们看起来像<table>行的3列。

关于如何在同一行中实现3 div的任何输入都将受到高度赞赏。

目前我的所有三个div都以线性化的方式一个接一个地显示。

Answer 1

通常，侧边栏具有固定的宽度，而middel内容区域占据了剩余的空间。考虑到这一点，这是最好的方法：

<style>
#left {
    width:200px;
    float:left;
} #right {
    width:200px;
    float:right;
} #main {
    margin:0px 200px;
}
</style>

<div id="container">
  <div id="left">content</div>
  <div id="right">content</div>
  <div id="main">content</div>
</div>

调整窗口大小，一切顺利。

使用JSFIDDLE：http://jsfiddle.net/7ayqe/

Answer 2

也许更简单的事情，如何：

HTML：

<div id="main">
    <div>content</div>
    <div>content</div>
    <div>content</div>
</div>

CSS：

#main{
    margin: 0 auto 0 auto;
    width: 960px; /*just an example*/
}
#main div{
    float: left;
    width: 320px; /* a third of the main width*/
}

我希望这会对你有所帮助。

Answer 3

给它们“float：left”属性和相应的宽度，使其达到你想要的大小。

示例（我知道这些是内联样式，仅用于演示目的）：

<div id="left-sidebar" style="width:30%;float:left"><!--Left Sidebar--></div>
<div id="content" style="width:50%;float:left"><!--Content--></div>
<div id="right-sidebar" style="width:20%;float:left"><!--Right Sidebar--></div>

Answer 4

这样的事情应该让你开始：

<div>
    <div class="column">column one</div>   
    <div class="column">column two</div>   
    <div class="column">column three</div>
    <div class="last"></div>
</div>


.column { float: left; padding: 5px }
.last { clear: left}

Here是一个实例

Answer 5

<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="clear"></div>

CSS：

.col1 {
   float:left;
   width:250px;
}

.col2 {
   float:left;
   width:600px;
}

.col3 {
   float:left;
   width:20px;
}

.clear {
   clear:both;
}

定位3个div，使它们看起来好像放在3列的表行中

5 个答案: