html - 带导航的三列标题

Question

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

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

导航是一个下拉菜单，尽管我用它切换，但我不能让所有 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;
}