css - float div css 问题

Question

我正在编写一个小的 PHP 脚本，我制作了 2 个 div 并使用 float 在同一行中显示两个 div。但我仍然对背景有疑问，因为两个 div 的高度不同。

这是 css 代码:

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

这是 html 代码:

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

Answer 1

你应该使用display: table-cell:

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

Demo

如果您愿意，还可以使用display: table-row 和display:table，并设置所有宽度。但没有必要。 Demo