在同一行上3个div的水平对齐

Question

我试图让3个div出现在阵型的同一条线上:左 - 中 - 右

例如,一个div左对齐,下一个居中,最后一个右对齐.

有谁知道如何做到这一点？我有2个div左右对齐,但是如果我在中间引入一个居中的div,它会将最右边的div移动到一个新的行上.

Answer 1

.left-col {
    float: left;
    width:25%;
}
.center-col {
    float: left;
    width: 50%;
}
.right-col {
    float: left;
    width: 25%;
}

<div class="left-col">purple</div>
<div class="center-col">monkey</div>
<div class="right-col">dishwasher</div>