浮动divs css问题

我正在编写一个小的PHP脚本，我制作了2个

div

s，并使用浮点来显示同一行中的两个

div

s。但是我的背景还是有问题，因为两个

div

s的高度不一样

这是css的代码：

.wrapper{
    width:200px;
}
.content{
    width:200px;
}
.right{
    float:right;
    width:100px;
    background:yellow;
}
.left{
    float:right;
    width:100px;
    background:red;
}
.clear{
    clear:both;
}

<div class="wrapper">
    <div class="content">
        <div class="right">
            sdiousoiudosud sdiousoiudosud sdiousoiudosud sdiousoiudosud
        </div>
        <div class="left">
            iuoiu
        </div>
        <div class="clear">
        </div>
    </div>
</div>

这是html代码：

.wrapper{
    width:200px;
}
.content{
    width:200px;
}
.right{
    float:right;
    width:100px;
    background:yellow;
}
.left{
    float:right;
    width:100px;
    background:red;
}
.clear{
    clear:both;
}

<div class="wrapper">
    <div class="content">
        <div class="right">
            sdiousoiudosud sdiousoiudosud sdiousoiudosud sdiousoiudosud
        </div>
        <div class="left">
            iuoiu
        </div>
        <div class="clear">
        </div>
    </div>
</div>

sdiousoiudosud sdiousoiudosud sdiousoiudosud sdiousoiudosud sdiousoiudosud
iuoiu

您应该使用

显示：表格单元格

：

.left, .right{
    display: table-cell;
    width: 100px;
}
.right{
    background:yellow;
}
.left{
    background:red;
}

如果需要，还可以使用

display:table row

和

display:table

，并设置所有宽度。但这不是必须的

“好方法”是使用

display:table cell

，如中所述

但如果您想支持IE7等旧浏览器，可以使用以下技巧：

.content{
    overflow: hidden;
}
.left, .right{
    float: left;
    width: 100px;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}
.right{
    background:yellow;
}
.left{
    background:red;
}

其中

10000px

可以是大于最高元素高度的任何值

---

您还没有真正提出问题。你希望达到什么目标？@Jeff我希望两个div的高度相同！编辑以包含该问题。在提问时，请务必明确说明您的期望。我应该在哪里使用它？