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

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

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

目前，您正在为元素设置相对（基于百分比）宽度，但填充以绝对单位（px）设置。这可能会强制span元素的组合宽度大于100％，这是浏览器窗口的宽度，因为绝对大小的填充占用的百分比宽度在较小的窗口大小时会更大。您可以以百分比设置填充，并确保两个元素（包括宽度，填充，边距和边框）加上the one character space rendered between inline-block elements的组合宽度小于100％。或...
您可以在跨度上设置box-sizing: border-box;，因此，它们的填充将在您设置的宽度内呈现。 See here for more on box-sizing。如果这样做，请不要忘记带前缀的版本（例如-webkit-box-sizing：border-box）。
可以说，为了使您的网站具有响应能力，正如您在问题中提到的那样，您不应希望跨度在每个浏览器宽度上并排显示。例如，在面向纵向的手机上，您的用户可能会发现更容易将跨距堆叠在一起。虽然这超出了你的问题的范围（我不知道你打算用span元素做什么），但我建议用media queries来做这件事。

如果您编辑问题以告诉我们您的意图，我可以更具体，更有帮助：）

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

1 个答案: