div 列有问题

Question

我想要 3 列宽度相同。

我确实通过使用 div 成功了。 我在一个 div 中创建了 2 个 div，然后在两个 div 中的一个中创建了另一个 div，然后使用 css 左右浮动。

但想知道是否有其他更好的方法？ （没有桌子，我试着在没有桌子的情况下这样做） 因为我无法将图像旁边的文本居中

因为我使用了浮动，所以白色背景在列所在的区域消失了。

谁能帮我解决我遇到的问题或给我一个替代方法。

Answer 1

<div class="wrapper">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

.wrapper {
    margin: 0 auto;
    width: 450px;
}
.left {
    float: left;
    width: 150px;
    background-color: red;
    height:200px;
    display:inline-block;
}
.middle {
    background-color: yellow;
    height:200px;
    width: 150px;
    display:inline-block;
}
.right {
    float: right;
    width: 150px;
    background-color: blue;
    height:200px;
    display:inline-block;
}

Answer 2

我真的不明白你的问题。但我提出了一个解决方案。这是我在 Fiddle 上的演示：

http://jsfiddle.net/asubanovsky/8d3m9/

HTML：

<div id='parent'>
    <div id='first'>First</div>
    <div id='second'>Second</div>
    <div id='third'>Third</div>
</div>

CSS：

#parent{
    width: 900px;
    margin: 0 auto;
}

#first, #second, #third{
    width: 300px;
    float: left;
    color: white;
    text-align: center;
}

#first{
    background-color: #222;
}

#second{
    background-color: #444;
}

#third{
    background-color: #666;
}