为垄断创建嵌套div

Question

我想创建垄断棋盘游戏。

这是我设计的第一部分。

游戏的最上一行是这样的：

这是css和html部分。

当停车停车后我添加街道名称第一个col

当我添加红盒子时，一切都像这样破碎了

我使用浮动左，但它不会工作 我的CSS错了吗？ 这是我的HTML部分：

 <div class="top-streets">
        <div class="parking">parking</div>
        <div class="horizantal">
            <div class="price">
                220$
            </div>
            <div class="street-name-top">
                Strand
           </div>
            <div class="red-kart , horizantal-min"/>
        </div>
        <div class="horizantal">
            <div class="price">
                220$
            </div>
            <div class="street-name-top">
                Kentaky Avenue
            </div>
            <div class="red-kart , horizantal-min"/>
        </div>
        <div class="horizantal">
            <div class="price">
                220$
            </div>
            <div class="street-name-top">
                FLEET STREET
            </div>
            <div class="red-kart , horizantal-min"/>
        </div>
        <div class="horizantal">
                <div class="price">
                    240$
                </div>
                <div class="street-name-top">
                    TRAFLEGAR SQUARE
                </div>
            <div class="red-kart , horizantal-min"/>
        </div>
    </div>

这是我的css：

.parking
{
    width: 150px;
    height: 150px;
    border: 1px solid #000000;
    float: left;
}

.top-streets
{
    background-color: aliceblue;
    width:850px;
    height:180px;
    display: inline-block;
}
.horizantal {
     background-color: aquamarine;
     position: relative;
     border: 1px solid #000000;
     width: 100px;
     height: 150px;
     display: inline-block;
     /*float: left;*/
     text-align:center;
    top: 0px;
    /*margin-left: 100px;*/
    /*vertical-align: top;*/
 }
.street-name-top{/* Firefox */
    -moz-transform: rotate(180deg);
    position:  relative;
    width: 100px;
    height: 50px;
    top:60px;
}
.price{/* Firefox */
    -moz-transform: rotate(180deg);
    top:10px;
    position: relative;
    text-align:center;
    width: 100px;
    height: 20px;
}
.horizantal-min {
    width: 100px;
    height: 20px;
    border-top: 2px solid #000000;
    position: relative;
}
.red-kart{
 background-color: red;
    position: absolute;
    bottom:0px;
}

怎么了？我希望在网页设计的基础上变得强大，并且在强大的概念使用帮助框架之后。 我应该使用任何其他方式或框架吗？ 请帮帮我