当我有两个跨度时，如何在CSS中实现响应性设计？

我有一个设计挑战。我有两个跨度，并排的，我真的不知道如何做那种CSS并且仍然使它响应。我会在一个视图端口大小上有太大的边距，而在另一个视图端口大小上有两个小边距。有什么建议可以让它在每个屏幕大小上看起来都一样，中间没有很大的空间

我的CSS：（我知道有点长）

依靠XMLHttpRequest对象，我实际上只有两个跨度：

        <span id="intendedContent">
        </span>
        <span id='lattice'>
        </span>

---

在不确切知道您要做什么的情况下，很难回答您的问题，但我怀疑您试图使跨度在任何窗口大小下并排排列，但事实上，它们在小窗口大小下彼此重叠。对吗

如果是，您有三个基本选项：

目前，您正在为元素设置相对（基于百分比）宽度，但填充设置为绝对单位（px）。这可能会迫使跨度元素的组合宽度大于100%，这是浏览器窗口的宽度，因为绝对大小的填充所占的宽度百分比在较小的窗口大小时更大。您可以以百分比为单位设置填充，并确保两个元素的组合宽度（包括宽度、填充、边距和边框）加起来小于100%。或者

您可以设置

框大小：边框框，因此，它们的填充将在您设置的宽度内呈现。如果这样做，请不要忘记前缀版本（例如-webkit框大小：边框框）

可以说，要使您的站点响应，正如您在问题中提到的，您不应该希望跨距在每个浏览器宽度上并排显示。例如，在面向人像的手机上，用户可能会发现将跨距叠在一起更容易访问。虽然这超出了您的问题范围（我不知道您打算对跨度元素做什么），但我建议您使用

---

如果您编辑您的问题以让我们知道您的意图，我可以更具体、更有用：）

那么您下一步要做什么？如果没有一些HTML，很难知道从哪里开始……您的问题中没有提供足够的信息来解决问题。请发布一篇文章来重现这个问题，并准确地说出你想要的。你为什么在CSS规则中使用position:fixed？对不起。。。我会看看我是否也能发布一些HTML。我使用固定的规则，因为我只使用两件事中的一件：绝对的，或固定的。如果我做绝对，我不知道我的页面会发生什么。谢谢。。。这正是我要问的。你做得很好。

        <span id="intendedContent">
        </span>
        <span id='lattice'>
        </span>