如何在窗口大小更改時保持兩個內聯div相對？

Question

我有兩個div s包裹和內聯彼此。首先包含一個圖像，第二個菜單。它們尺寸靈活，適合用戶整個屏幕，並且只考慮高度而保持比例。寬度不是問題。

隨着窗口大小的變化，圖像重新調整，但菜單顯示爲固定或絕對位置。我如何使包含菜單的第二個div與圖像的第一個div成比例移動。而不是在它們之間出現間隙或在另一個方向上彼此溢出。

謝謝你的幫助！

/*CSS*/ 
 

 
html, body, .parent { 
 
    height: 100%; 
 
    margin:0; 
 
} 
 

 
.parent { 
 
    white-space: nowrap; 
 
} 
 
.parent > div { 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: top; 
 

 
} 
 
img { 
 
    height: 100%; 
 
    max-height: 100%; 
 
} 
 

 
menu ul, li { 
 
    display: inline; 
 
}

<!--HTML--> 
 

 
<div class="parent"> 
 
    <div class="left"> 
 
    <img src="http://www.wallpit.com/file/127/1536x2048/crop/romantic-nature.jpg" /> 
 
    </div> 
 
    <div class="right"> 
 
    <div id="menu"><ul> 
 
     <li><a href="#">Example</a></li> 
 
     <li><a href="#">Example</a></li> 
 
     <li><a href="#">Example</a></li> 
 
     <li><a href="#">Example</a></li> 
 
     </ul></div> 
 
    </div> 
 
</div>

這裏是一個JSFiddle例子。

Answer 1

您需要設置「左」div的寬度。

嘗試這種情況：

img { 
    width: 100%; 
    height: auto; 
} 

.left { 
    width:500px; 
}