使用div缩放图像，其子设置高度

div本身就是其内容的高度。使用div缩放图像，其子设置高度

我想要一个div包含两个孩子：另一个div（或左对齐的图像）和无序列表（ul）。内部div（或图像）将匹配父div的高度，父div高度将符合列表的高度（可以包含任何合理数量的项目）。

我不确定如何设置父div的高度以匹配列表的高度，并让inner div匹配外部div的高度。通过CSS正确完成。

备用解决方案很高兴地接受，这只是我试图解决我的设计目标的一种方法。

来源

2011-03-07 Sarabjot

Live Demo

在IE7/IE8测试，并将最新版本：火狐，Chrome，Safari浏览器，歌剧。
图像的高度完全取决于ul的高度。
要提供IE7所需的额外规则height: 100%，我正在使用Star hack。如果您需要100％有效的CSS，则可以使用conditional comments或Star plus hack。

CSS：

#iContainer { 
    background: #ccc; 
    overflow: hidden; 
    position: relative 
} 
#iContainer div { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    *height: 100% /* just for you, IE7 */ 
} 
#iContainer img { 
    height: 100% 
} 
#iContainer ul { 
    float: right 
}

HTML：

<div id="iContainer"> 

    <div><img src="https://dummyimage.com/500x700/f0f/fff" /></div> 

    <ul> 
     <li>list 1</li> 
     <li>list 2</li> 
     <li>list 3</li> 
     <li>list 4</li> 
     <li>list 5</li> 
     <li>list 6</li> 
     <li>list 7</li> 
     <li>list 8</li> 
    </ul> 

</div>

大红色图片：

来源

2011-03-07 21:53:06 thirtydot

OP - 选择这个在我的更好 – 2011-03-07 22:15:08

@Sarabjot：让我知道如果你遇到任何问题，这不是我以前试过的东西。我有兴趣听到任何警告（当你在真实网站上使用它）。 – thirtydot 2011-03-07 22:26:32

非常感谢！我认为这是沿着这些线条，优雅的解决方案。它被用于数学网站来表示线性系统。左图像实际上是一个开放的大括号。 – Sarabjot 2011-03-07 22:32:14

这是做你以后的事情吗？

http://jsfiddle.net/Mutant_Tractor/CQG8s/

它使用一个小的（纯JS）脚本来衡量页面加载列表高度，然后通过.style.height方法:)

来源

2011-03-07 20:46:58

太棒了，谢谢！不幸的是JS不是一种选择。如果我向老板提出这个问题，他会告诉我用表格来解决这个问题。我试图限制我对CSS和HTML的回答，但我可以看到哪里可能无法实现。 – Sarabjot 2011-03-07 20:50:10

你可以试试人造色谱柱吗？ http://www.alistapart.com/articles/fauxcolumns/ – 2011-03-07 20:52:28

包含div的图像是不重复的，只是缩放到列表的高度。 – Sarabjot 2011-03-07 20:54:13

如果你想有一个div来匹配动态设置div的高度其容器高度，将其高度设置为100％。如果您希望div使用尽可能多的空间，请将其高度设置为auto（默认）。

所以，它听起来像你要找的布局

<style type="text/css"> 
.scaledimage{height:100%;float:left} 
.list{float:left;} 
</style> 
<div class="container"> 
    <div class="scaledimage"></div> 
    <div class="list"></div> 
<div>

来源

2011-03-07 20:54:02 Tony

使用div缩放图像，其子设置高度

回答

相关问题