0

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

我需要满足这些要求：

  • [编辑] 适合左侧的图像以匹配顶部菜单和底部菜单之间的空间高度
  • 保留左侧图像的纵横比。
  • 让#products-listdiv 占据#content's 宽度的其余部分（现在我已经在那里硬编码了一个值，这不是流动的，这不适用于不同的设备）
  • 使.button浮动正确并占据.product宽度的百分比（例如 10%）

如何实现？

编辑：我被卡住的地方是我想不出一种方法来使右侧的元素（即#products-list元素）的宽度等于屏幕的宽度减去图像的宽度。

what have you tried?

鉴于我所拥有的知识，我想不出任何好的方法来实现我的要求。此外，我还没有在其他任何地方看到过这样的事情。

4

1 回答 1

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>
于 2012-10-18T12:36:15.693 回答