css - 流体布局中的比率相关元素

Question

我正在为类似于此的移动设备设计:http://jsfiddle.net/rdCdx/

我需要满足这些要求:

• [edit] 调整左边的图像以匹配顶部菜单和底部菜单之间的空间高度
• 保留左侧图片的纵横比。
• 让 #products-list div 占据 #content 的剩余宽度(现在我已经在那里硬编码了一个值，这不是流体，这不适用于不同的设备)
• 让 .button 向右浮动并占据 .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>