Html 使用div缩放图像，其子级设置高度_Html_Css_Semantic Markup

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

html css

Html 使用div缩放图像，其子级设置高度,html,css,semantic-markup,Html,Css,Semantic Markup,div本身就是其内容的高度我希望一个div包含两个子项：另一个div（或左对齐的图像）和一个无序列表（ul）。内部div（或图像）将匹配父div的高度，父div的高度将符合列表的高度（可以包含任意数量的项目）我不确定如何将父div的高度设置为与列表的高度匹配，并使内部div与外部div的高度匹配。通过CSS正确完成替代解决方案被欣然接受，这只是我试图实现设计目标的一种方式。这是否符合您的要求它使用一个小的（纯JS）脚本来测量页面加载时的列表高度，然后通过.style.height方法动

div本身就是其内容的高度

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

我不确定如何将父div的高度设置为与列表的高度匹配，并使内部div与外部div的高度匹配。通过CSS正确完成

替代解决方案被欣然接受，这只是我试图实现设计目标的一种方式。

这是否符合您的要求

它使用一个小的（纯JS）脚本来测量页面加载时的列表高度，然后通过

.style.height

方法动态设置div的高度：）

这是否符合您的要求

它使用一个小的（纯JS）脚本来测量页面加载时的列表高度，然后通过

.style.height

方法动态设置div的高度：）

如果希望div与其容器的高度匹配，请将其高度设置为100%。如果希望div使用尽可能多的可用空间，请将其高度设置为“自动”（默认）

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

<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>


.scaleImage{height:100%；float:left}
.list{float:left；}

如果希望div与其容器的高度相匹配，请将其高度设置为100%。如果希望div使用尽可能多的可用空间，请将其高度设置为“自动”（默认）

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

<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>


.scaleImage{height:100%；float:left}
.list{float:left；}

在IE7/IE8和最新版本中测试：Firefox、Chrome、Safari和Opera
图像的高度完全取决于
```
ul
```
的高度
为了给IE7提供所需的额外规则
```
高度：100%
```
，我使用了。如果需要100%有效的CSS，您可以使用，或者使用

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
}

<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>

HTML:

#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
}

<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>



清单1
清单2
清单3
清单4
清单5
清单6
清单7
清单8

大粉色图像：

#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
}

<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>

在IE7/IE8和最新版本中测试：Firefox、Chrome、Safari和Opera
图像的高度完全取决于
```
ul
```
的高度
为了给IE7提供所需的额外规则
```
高度：100%
```
，我使用了。如果需要100%有效的CSS，您可以使用，或者使用

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
}

<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>

HTML:

#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
}

<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>



清单1
清单2
清单3
清单4
清单5
清单6
清单7
清单8

大粉色图像：

#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
}

<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>

太棒了，谢谢！不幸的是，JS不是一个选项。如果我把这件事告诉老板，他会告诉我用表格来解决。我试图将我的答案限制在CSS和HTML上，但我可以看到哪里不可能。包含div的图像是不重复的，只是缩放到列表的高度。你不会因此而疯狂像素化吗？这是一个正在缩小的大图像--它是一个具有定义边缘的单一ASCII字符，所以像素化似乎不是什么大问题。问题是它需要与列表的高度相匹配。@thirtydot Yayy慰问：太棒了，谢谢！不幸的是，JS不是一个选项。如果我把这件事告诉老板，他会告诉我用表格来解决。我试图将我的答案限制在CSS和HTML上，但我可以看到哪里不可能。包含div的图像是不重复的，只是缩放到列表的高度。你不会因此而疯狂像素化吗？这是一个正在缩小的大图像--它是一个具有定义边缘的单一ASCII字符，所以像素化似乎不是什么大问题。问题是它需要与列表的高度相匹配。@thirtydot Yayy慰问：DOP-选择这个比我的多nicer@Sarabjot当前位置如果您遇到任何问题，请告诉我，这不是我以前尝试过的。我很想听到任何警告（当你在真实的网站上使用它时）。非常感谢！我认为这是一个很好的解决方案。它被用于数学网站来表示线性系统。左图实际上是一个开放的brace.OP-请选择这个而不是我的nicer@Sarabjot当前位置如果您遇到任何问题，请告诉我，这不是我以前尝试过的。我很想听到任何警告（当你在真实的网站上使用它时）。非常感谢！我认为这是一个很好的解决方案。它被用于数学网站来表示线性系统。左图实际上是一个大括号。