Css左右浮动为div

Question

我需要将div分为左右列。因此，使用rightColumnRow的div必须在右列中，leftColumnRow - 在左列中。

.leftColumnRow {
     float: left;
     width: 50%;
     background-color: #CCF;
}
.rightColumnRow {
    float: right;
    width: 50%;
    background-color: #FFA;
}

<div class="projectTabContent">
    <div class="rightColumnRow row  ">
        rightColumnRow
    </div>
    <div class="leftColumnRow row  ">
        leftColumnRow
    </div>
    <div class="leftColumnRow row  ">
        leftColumnRow
    </div>
    <div class="leftColumnRow row  ">
        leftColumnRow
    </div>
    <div class="rightColumnRow row  ">
        rightColumnRow
    </div>
</div>

但它无法正常工作。 我该如何解决？

Answer 1

.leftColumnRow {
    float: left;
    width: 50%;
    background-color: #CCF;
}
.rightColumnRow {
    float: right;
    width: 50%;
    background-color: #FFA;
}

<div class="projectTabContent">
    <div class="rightColumnRow row  ">
        <div class="row  ">
            rightColumnRow
        </div>
        <div class=" row  ">
            rightColumnRow
        </div>
    </div>

    <div class="leftColumnRow row  ">
        <div class="row  ">
            leftColumnRow
        </div>
        <div class="row  ">
            leftColumnRow
        </div>
    </div>    
</div>