0

我有一个设计挑战。我有两个并排的跨度，我真的不知道如何做那种 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：

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

1 回答 1

2

在不确切知道您要做什么的情况下很难回答您的问题，但是我怀疑您正在尝试使跨度在任何窗口大小下并排保持，但实际上它们是彼此堆叠的在小窗口尺寸。那是对的吗？

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

  1. 目前，您正在为元素设置相对（基于百分比）宽度，但填充以绝对单位 (px) 设置。这可能会迫使 span 元素的组合宽度大于 100%，这是浏览器窗口的宽度，因为在较小的窗口大小下，绝对大小的填充所占的百分比宽度更大。您可以按百分比设置内边距，并确保两个元素的组合宽度（包括宽度、内边距、边距和边框）加上行内块元素之间呈现的一个字符空间小于 100%。或者...

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

  3. 可以说，为了使您的网站具有响应性，正如您在问题中提到的那样，您不应该希望跨度在每个浏览器宽度上并排显示。例如，在面向纵向的手机上，您的用户可能会发现将跨度堆叠在一起更容易访问。虽然这超出了您的问题范围（而且我不知道您打算如何处理 span 元素），但我建议您使用media queries进行此操作。

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

于 2013-11-13T03:17:21.433 回答