带有导航的三列标题

Question

我需要有关带图像的三列标题的帮助。

我需要中间列能够容纳尺寸为166px x 156px的图像。我想在左右列中导航。所有列标题都将包含黑色的背景颜色。

导航是一个下拉菜单，就像我用它切换一样，我不能让所有4个横向移动到页面上，在图像旁边的页面上放置相同的高度，整个事物居中。

我目前的代码是：

<div class="wrapper">
    <div class="left"></div>
    <div class="central"></div>
    <div class="right"></div>
</div>


.wrapper {
    width:100%;
    height:50px;
    display: table;
}
.central {
    width:166px;
    height:156px;
    background-color:#000;
    display: table-cell;
}
.left, .right {
    height:156px;        
    display: table-cell;
    background-color:#000;
}
.right {
    background-color:#000;
}

Answer 1

使用以下CSS检查

.wrapper {
    width:100%;
    height:50px;
}
.central {
    float: left;
    width:166px;
    height:156px;
    background-color:#000;
    margin-left:5px;
}
.left, .right {
        float: left;
    height:156px;
    width: 30%;
    background-color:#000;
}
.right {
    background-color:#000;
    margin-left:5px;
}