html - 处理可变内容边距的最佳实践方法?

标签 html css

好吧,我为 friend 拼凑的一个快速网站有大约 20 个静态页面。每一个都有少量的内容。 div 容器包含 div 内容,而 div 内容显然包含在每个页面上更改的内容。

现在,根据内容的长度,我希望顶部有不同的边距。内容越少,margin 就越大。只是一种审美选择。例如,如果内容几乎填满静态大小的容器,则填充较少,但 1 行内容页面可能占静态容器下方的 1/3。将 div 中的内容居中是行不通的,因为这会产生太大的边距。

处理此问题的最佳方法是什么?每个具有不同边距的内容的新类?一个新的 Id,以便它在其自己的特殊 div 中以不同的方式定位或 margin ?每个页面上的内联 css 以覆盖 div 内容的标准 css?在每个页面上的内容之前,容器内有一个不同的间隔 div?沿着 Content = (ContainerHeight - ContentHeight)/3 边缘的某种脚本?

这样做的可接受方式是什么?我不想养成坏习惯。

最佳答案

如果 javascript 是一个选项,您可以计算内容框的高度并根据您喜欢的公式设置上边距。

在 jquery 中它会是这样的:

c_height = $("#Content").height();
c_margin = Math.floor( /* your formula */ );
$("#Content").css("margin-top", c_margin + "px");

(不确定 "px" 部分...)

关于html - 处理可变内容边距的最佳实践方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2726069/

相关文章:

android - Android 上是否有比 PhoneGap 更快的 WebView for HTML5 Canvas?

javascript - 使用 jquery 更改选项卡容器属性

jquery - 正确地为 jQuery Mobile 换肤

html - 横幅高度不是仅在 iPad 上的设备高度

html - CSS 和 HTML 间距问题

java - 页面刷新后如何重定向到登录页面

php - Localhost over network - CSS 文件在通过网络访问时被缓存而不更新

javascript - 如何通过另一个元素检测鼠标悬停?

html - 为什么我的固定菜单在我的汉堡包图标下面?

html - Bootstrap CDN 渲染延迟