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

时间:2012-10-18 12:09:27

标签: css

我正在开发与此类似的移动设备设计:http://jsfiddle.net/rdCdx/

我需要满足这些要求:

  • [edit]适合左侧的图像以匹配顶级菜单和底部菜单之间的空间高度
  • 保留左侧图像的宽高比。
  • #products-list div占据#content宽度的其余部分(现在我已经在那里硬编码了一个值,这不是流畅的,这不适用于不同的设备)
  • .button向右浮动并占据.product宽度的百分比(比如说10%)

如何实现这一目标?

编辑:我被卡住的地方是我想不出一种方法可以使右边的元素,即#products-list元素的宽度等于屏幕宽度减去图像宽度。

what have you tried?

考虑到我所拥有的知识,我想不出有任何改善我的要求的好方法。此外,我还没有在其他地方看到过这样的事情。

1 个答案:

答案 0 :(得分: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>