当我有两个并排的时候，如何在我的CSS中实现响应式设计？

Question

我有一个设计挑战。 我有两个跨越，并排，我真的不知道如何做这种CSS，仍然使它响应。 我在一个视图端口大小上有太大的边距，而在另一个视图端口大小上有两个小边距。 关于如何使它在每个屏幕尺寸上看起来都相同的任何建议，两者之间没有大的空间？

我的CSS :(我知道它有点长）

#lattice {
height: 93%;
width: 30%;
position: fixed;
background-color: white;
top: 40px;
right: .75%;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
overflow-y: scroll;
}
#intendedContent {
font-size: 16px;
position: fixed;
background-color: white;
top: 40px;
left: 1%;
display: inline-block;
overflow-y: scroll;
height: 93%;
width: 62.5%;
padding-left: 20px;
padding-top: 0px;
padding-right: 20px;
word-wrap: break-word;
line-height: 175%;
}

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

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

Answer 1

如果不确切地知道你想要做什么就很难回答你的问题，但是我怀疑你试图让这些跨度在任何窗口大小上保持并排，但实际上它们是叠在一起的。在小窗口尺寸。 那是对的吗？

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

1. 目前，您正在为元素设置相对（基于百分比）宽度，但填充以绝对单位（px）设置。 这可能会强制span元素的组合宽度大于100％，这是浏览器窗口的宽度，因为绝对大小的填充占用的百分比宽度在较小的窗口大小时会更大。 您可以以百分比设置填充，并确保两个元素（包括宽度，填充，边距和边框）的组合宽度加上内联块元素之间呈现的一个字符空间小于100％。 要么...

2. 你可以设置box-sizing: border-box; 在跨度上，因此，它们的填充将在您设置的宽度内呈现。 有关盒尺寸的更多信息，请参见此处 。 如果这样做，请不要忘记带前缀的版本（例如-webkit-box-sizing：border-box）。

3. 可以说，为了使您的网站具有响应性，正如您在问题中提到的那样，您不应希望跨度在每个浏览器宽度上并排显示。 例如，在面向纵向的手机上，您的用户可能会发现更容易将跨距堆叠在一起。 虽然这超出了你的问题范围（我不知道你打算用span元素做什么），但我建议用媒体查询来做这件事。

如果你编辑你的问题，让我们知道你的意图，我可以更具体，更有帮助:)