Question

好的，所以这就是问题所在：我的div设置为几乎整个屏幕尺寸（在移动设备上），内容将放在其中，但内容本身不在我的直接控制之下。内部图像或链接上没有内联样式。我需要确保：

1 - 在div中可以看到所有内容，如果有长行则会被迫包裹，或者只是被截断。

2 - 图像应保持其宽高比，但应调整大小以保持在div的范围内。

3 - 内容应“填充”空间，根据需要变大或变小。

最后一个奖励：内容中最多会有一张图片，但可能会有多个链接。

我在这里找到了其他一些答案，但没有遇到这个特殊的挑战。

jQuery是一个选项，但我发现它在移动设备上运行缓慢，jQuery Mobile是一个选项，但同样基本的问题。

以最有效的方式执行此任务的CSS和Javascript的最佳组合是什么。

Answer 1

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

Answer 2

我认为你不需要任何形式的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>替换它们......只需确保添加开始和结束段落标记。

确保调整任何内容的大小以适应固定的div

2 个答案: