比在流体布局

  • Z时代
  • 2024-01-10
  • 分类：问答

相关的元素，我正在为类似的移动设备设计的这一个：http://jsfiddle.net/rdCdx/比在流体布局

我需要满足以下要求：

  • [编辑]在适应图像左侧以匹配顶部菜单和底部菜单之间的空间高度

  • 保留左侧图像的纵横比。

  • 有#products-list DIV占据#content的宽度的其余部分（现在我已经硬编码值出现，这是不是液体，这将无法在不同的设备上工作）

  • 有.button浮动right并且占据.product的宽度的一个百分比（比如10％）

这怎么实现？

编辑：的地步，我坚持的是，我不能想办法让右边，即#products-list元素的元素，有一个宽度等于屏幕的宽度减去宽度图片。

what have you tried?

考虑到我有这些知识，我无法想出在我的要求方面取得进展的任何好方法。另外，我还没有在其他地方看到过这样的事情。

回答：

你可以使用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="/wp-content/uploads/new2022/20220327voicc/43150531"/> 
    <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>

以上是 比在流体布局 的全部内容， 来源链接： utcz.com/qa/265231.html

回到顶部