在圖像旁創建一個垂直菜單

Question

我試圖在圖像旁邊創建一個垂直導航（請參閱圖像表單，我試圖實現）。

理想情況下，我想整個街區限制的高度（比如400像素）。

以下是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