时间戳

首页 > 解决方案 > HTML 元素呈现的宽度不等于设置的 CSS 宽度

html - HTML 元素呈现的宽度不等于设置的 CSS 宽度

问题描述

我有一组嵌套的 HTML，元素由父级 (AssetContainer) 和并排的两个主要嵌套部分 (MediaViewContainer & AssetDetailsContainer) 组成。右侧组件 (AssetDetailsContainer) 有几个子 div，但它们没有自己的样式。我的问题是右侧组件未按其样式的大小呈现。AssetDetailsContainer CSS 将宽度设置为 600 像素，这会出现在检查器中，但随后会使用一个不同的、小得多的值来实际渲染元素。如果我设置一个较大或较小的值，它会增长和缩小，但在设置的值的某个非整数范围内。尽管“缩放”可能是一个不好的术语，因为渲染值/输入值比率不是一个常数。

我为宽度中涉及的主要元素附加了检查器面板的一些图像，显示了它们的 HTML、CSS 和实际呈现的属性。我知道图像并不理想，但这些似乎最能代表一个地方的相关数据。

AssetDetailsContainer（右侧子元素）检查器快照 AssetDetailsContainer（右侧子元素）检查器快照

查看检查器中显示的结果 AssetDetailsContainer，我们在 CSS 中看到原始的 600px，但随后它被渲染为 104.5px。

AssetContainer（父元素）检查器快照 AssetContainer（父元素）检查器快照

MediaViewContainer（左侧子元素）检查器快照 在此处输入图像描述

关于布局，我在这里缺少什么？

标签： htmlcsslayout

解决方案

原来解决方案是将 AssetDetailsContainer 嵌套在 unstyled 中<div>。我认为由于 AssetDetailsContainer 具有相对定位属性，因此与用于创建并排布局的父级的 flex 定位效果不佳。额外的 div 层似乎给了它不同定位属性的正确分割，我现在得到了预期的行为。

推荐阅读