Html 有人推我吗？3列布局

我正在Bootstrap2.0上建立我的网站。我正在尝试制作一个3列布局，如图所示：
问题是div不断被推（我是CSS的新手：）

现在我的页面如下所示：

我的html和css（注意我对html文件做了一些额外的样式，我没有包括bootstrap.css，因为我没有对它做任何更改。我没有使用外部样式表（bootstrap除外）

Foxfile
身体{
利润率：50像素；
背景图片：url（img/noised_grey.png）；
}
#包装纸{
背景图片：url（img/noised_white.png）；
边界半径：7px；
}
#项目列表{
宽度：100%；
}
#项目列表p，h1，h2，h3，h4，h5，h6，字体，a{
填充：10px；
}
#项目列表img{
利润率：10px；
}
.circle_预览{
边界半径：150px；
背景图片：url（img/noised_grey.png）；
高度：30px；
宽度：30px；
填充：10px；
}
页脚{
颜色：#fff；
利润率：10px；
字体大小：粗体；
}
.定位中心{
文本对齐：居中；
位置：相对位置；
}
最新软件






流行软件

我已经按照OP的要求编译了一系列不同的方法来实现3列布局

方法1（内联块）

• 请注意，在将元素水平对齐到内联块时，存在空白问题

方法2（表格+表格单元格）：

<div class="table-wrapper">
    <div class="table-cell">table cell</div>
    <div class="table-cell">table cell</div>
    <div class="table-cell">table cell</div>
</div>

方法3（浮动）

*这种方法很好，因为在将子元素设置为内联块时不会遇到空格问题

---

如果你看看我的JSFIDLE，我已经添加了一些额外的样式，包括

框大小：边框框；

，它允许你在不影响网格布局的情况下添加填充和边框。

我可以马上说，你需要改进标记。永远不要使用相同的

id

两次，这就是

class

是的。但这可能是问题吗？这不是问题，但它很可能是问题的一部分。我想我可以使用表格来布置页面，而不是divs。你应该使用

display:inline block

，将三列div的宽度设置为33.33333%，将包装div设置为

width:100%；

。或者使用wrap将每个div设置为

display:table；

并将三个子div设置为

display:table cell；

<div class="wrapper">
    <div class="inline-block">inline-block</div>
    <div class="inline-block">inline-block</div>
    <div class="inline-block">inline-block</div>
</div>

.wrapper {
    width:100%;
}
.inline-block {
    display:inline-block;
    border:1px solid black;
    text-align:center;
    background-color:#eee;
    width:32%;
}

<div class="table-wrapper">
    <div class="table-cell">table cell</div>
    <div class="table-cell">table cell</div>
    <div class="table-cell">table cell</div>
</div>

.table-wrapper {
    display:table;
    width:100%;
}
.table-cell {
    display:table-cell;
    border:1px solid black;
    width:33%;
    text-align:center;
    background-color:red;
}

<div class="wrapper">
    <div class="float">inline-block</div>
    <div class="float">inline-block</div>
    <div class="float">inline-block</div>
</div>

.float {
    float:left;
    width:33%;
    text-align:center;
    background-color:pink;
}