css 确保调整所有内容的大小以适合固定的div

zzoitvuj  于 2023-01-14  发布在  其他
关注(0)|答案(2)|浏览(143)

好吧,问题是:我有一个div,它几乎被设置为整个屏幕大小(在移动终端上),内容将被放置在其中,但内容本身并不在我的直接控制之下。图像或链接中不会有内联样式。我需要确保:
1 -div中的所有内容都是可见的,如果有很长的行,它们将被强制换行,或者干脆被截断。
2 -图像应保持其纵横比,但应调整大小以保持在div的范围内。
3 -内容应该“填充”空间,根据需要变大或变小。
最后一个奖励:内容中最多只能有一张图片,但也可以有多个链接。
我在这里找到了一些其他的答案,但没有一个能满足这个特殊的挑战。
jQuery是一个选项,但我发现它在移动的设备上运行缓慢,jQuery Mobile是一个选项,但存在相同的基本问题。
CSS和Javascript的最佳组合是什么,以最有效的方式执行此任务可能。

bjp0bcyl

bjp0bcyl1#

#wrapper {
 width: 960px;
 margin: 0 auto;
 overflow: hidden;
}

.img_class {
 height:auto;
 width:auto;
 max-width:960px;
}

/*If you have a div inside your wrapper then you would need this*/

#wrapper .contained_div {
 width: auto;
 display: inline-block;
 margin: 0;
}

/*If you want to stack stuffs one after another in a column then use this div */
.column {
 margin: 0 10px;
 overflow: hidden;
 float: left;
 display: inline;
}
fnx2tebb

fnx2tebb2#

我认为您不需要任何形式的JavaScript,但如果没有您正在使用的示例,我最好的猜测是:

#divId { height:auto; width:900px; white-space:normal; overflow:hidden; }
#divId img { height:auto!IMPORTANT; width:auto!IMPORTANT; max-width:900px; }

(用您的宽度值替换我的宽度值)
这将格式化文本,使其在div中正确显示,但它可能会显示为一个文本块,但这可能是您想要的。如果您想要格式化,您必须使用jQuery搜索div中的文本是否有换行符,并将其替换为</p><br /><p> ......只需确保添加开始和结束Paragraph标签。

相关问题