gpt4 book ai didi

html - CSS如何使DIV边框在宽度上动态变化

转载 作者:可可西里 更新时间:2023-11-01 12:48:46 25 4
gpt4 key购买 nike

我在 HTML 控件中水平显示图像。 images TABLE 在主 DIV 中。 DIV 的 CSS 如下:

#main
{
width: auto;
height: auto;
margin: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}

问题是主 DIV 边框没有扩展,图像从中掉落,如下面的屏幕截图所示:

enter image description here

这是 HTML 片段:

<body>
<div id="main">

...

<table>
<tr id="image-list">
</tr>
</table>

...

</body>

请建议如何更改代码,以便 DIV 边框根据其中的图像自动增加其宽度?

最佳答案

您遇到的问题 - Demo

这就是解决问题的方法,我什么都没做,我将 width: 100%; 分配给 table 元素,然后使用 table-layout: fixed; 这在此处重要,而不仅仅是为你的 img 使用 max-width: 100%;标签...还要确保您对 td 元素也使用 width...

Demo (已解决问题)

#main {
width: auto;
height: auto;
margin: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}

img {
outline: 1px solid #eee;
}

table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}

table tr td {
width: 33%;
}

table tr td img {
max-width: 100%;
}

关于html - CSS如何使DIV边框在宽度上动态变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21042952/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com