比在流體佈局

Question

相關的元素，我正在爲類似的移動設備設計的這一個：http://jsfiddle.net/rdCdx/

我需要滿足以下要求：

• [編輯]在適應圖像左側以匹配頂部菜單和底部菜單之間的空間高度
• 保留左側圖像的縱橫比。
• 有#products-list DIV佔據#content的寬度的其餘部分（現在我已經硬編碼值出現，這是不是液體，這將無法在不同的設備上工作）
• 有.button浮動right並且佔據.product的寬度的一個百分比（比如10％）

這怎麼實現？

編輯：的地步，我堅持的是，我不能想辦法讓右邊，即#products-list元素的元素，有一個寬度等於屏幕的寬度減去寬度圖片。

what have you tried? 

考慮到我有這些知識，我無法想出在我的要求方面取得進展的任何好方法。另外，我還沒有在其他地方看到過這樣的事情。

Answer 1

你可以使用HTML ...這將保存寬高比，但會縮小圖片多達任何高度需要的寬度是內容容器的50％。

<style type="text/css"> 
    img { width: 50%; float: left; } 
    #product-list { width: 50%; float: right; } 
    .product { overflow: hidden; } 
    .button { width: 10%; float: right; background: red; } 
</style> 
<div id="content"> 
    <img src="http://balloonraces.homestead.com/balloon.jpg"/> 
    <div id="product-list"> 
     <div class="product"> 
      <a class="button">Button</a> 
     </div> 
    </div> 
</div> 

或者，下面保留了圖像和產品清單的大小將佔用的剩餘空間。

<style type="text/css"> 
    img { width: 200px; float: left; } 
    #product-list { margin-left: 200px; } 
    .product { overflow: hidden; } 
    .button { width: 10%; float: right; background: red; } 
</style> 

您可以通過確定你想要一個開始表現得像其他的站指定更復雜的行爲，說你想後者的例子，直到點有一個1：兩個與規模之間的1比使用媒體查詢。

<style type="text/css"> 
    img { width: 200px; float: left; } 
    #product-list { margin-left: 200px; } 
    .product { overflow: hidden; } 
    .button { width: 10%; float: right; background: red; } 

    @media screen and (max-width: 400px) { 
     img { width: 50%; } 
     #product-list { width: 50%; float: right; margin: 0; } 
    } 
</style> 

任何比這更復雜的事情可能涉及JavaScript。

編輯由於您已更改問題的條件，您希望圖像始終爲高度的100％，此答案不再成立。而是使用以下CSS ...

<style type="text/css"> 
    img { height: 100%; float: left; } 
    #product-list { overflow: hidden; } 
    .product { overflow: hidden; } 
    .button { width: 10%; float: right; background: red; } 
</style>