Question

我想要3个宽度相同的列。

我通过使用div成功了。我在div中制作了2个div，然后在两个div之一中创建了另一个div，然后使用了css float left＆amp;右。

但是想知道是否有不同的更好的方式？（没有桌子，我试过这样做没有桌子）因为我无法集中在图像旁边的文本

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

有人可以帮助我解决我遇到的问题或给我一种替代方法。

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;
}

div列有问题

2 个答案: