當我有兩個並排的時候，如何在我的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元素做什么），但我建議用媒體查詢來做這件事。

如果你編輯你的問題，讓我們知道你的意圖，我可以更具體，更有幫助:)