在图像旁边创建垂直菜单

Question

我正在尝试在图像旁边创建一个垂直导航（请参阅图像表格，我想要实现的目标）。

理想情况下，我想将整个块限制在一个高度（比如400px）。

以下是HTML结构：

<div class="navSlider">
    <nav>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </nav>
    <div class="slider">
        <img src="img.jpg">
    </div>
</div>

我已经浮动了nav和.slider，并将宽度设置如下：

nav {
   width:28.57142%;
   background:#417050;
   float:left;
}

.slider {
   float:right;
   width:71.42857%;
}

这很好用，但我希望导航始终与图像的高度相同，并在div的中间垂直对齐。

任何帮助将不胜感激！

Answer 1

是的，你可以。将.navSlider表示为表格，将nav和.slider表示为表格单元格。然后垂直对齐导航。

CSS：

.navSlider {
    display: table;
    width: 100%;
}
nav, .slider {
    display: table-cell;

}
nav {
    width:28.57142%;
    background:#417050;
    vertical-align: middle;
}
.slider {
    background: lightgreen;
    height: 400px;
}

选中demo。

请注意nav和.slider与此代码的高度始终相同。如果您不想要，请从nav中移除背景颜色并将其添加到其中的ul：

nav {
    width:28.57142%;
    vertical-align: middle;
}
nav > ul {
    background:#417050;
}

检查updated Fiddle