我有一個網(wǎng)站，我定期將框（稱為便利貼的 div 元素）添加到寬度為 100% 的較大 div 元素（稱為部分）。部分元素是除網(wǎng)站標(biāo)題之外的整個網(wǎng)站。我對盒子使用了絕對定位，并根據(jù)頂部和左側(cè)像素設(shè)置了它們在網(wǎng)站上的位置。.section{ width: 100%; height: 1000px; margin: 0 auto; background-repeat: repeat-y; background-size:contain; background-color: #8B8B8B;}.post-it{ height: 100px; width: 100px; font-family: 'Monte', sans-serif; font-size: 25; padding-top: 56.25%;}<header> <p>Sample header of webpage</p></header><div class="section"> <div class = "post-it" style = "position: absolute; top: 640px; left: 20px;"> . . . <div class = "post-it" style = "position: absolute; top: 1450px; left: 870px;"> . (arbitrary amount of post-its added at different times)</div><footer> <p>Sample footer of webpage</p></footer>當(dāng)我在筆記本電腦上時，我可以在較大的 div 元素的最右側(cè)部分添加一個框，并且網(wǎng)站顯示不會受到干擾。但是，當(dāng)我在屏幕較小的手機(jī)上刷新同一頁面時，整個網(wǎng)站會縮小到瀏覽器窗口的左上角，并且便利貼在白色背景上閑置，這不是我編碼的一部分。另外，當(dāng)我調(diào)整桌面上的瀏覽器窗口時，一些便利貼被裁剪掉。作為參考，我沒有使用網(wǎng)站上的表格進(jìn)行布局。如何調(diào)整 div 元素，使網(wǎng)站在不同屏幕尺寸的設(shè)備上看起來相同？
1 回答
慕勒3428872
TA貢獻(xiàn)1848條經(jīng)驗 獲得超6個贊
更新- 硬編碼位置
.section應(yīng)該position設(shè)置relative為absolute指定定位的子元素錨定到它。然后，您可以嘗試使用百分比來確保子元素的位置保持.section在不同的視口內(nèi)。
但是，僅使用內(nèi)聯(lián)樣式和絕對位置時，無法確保absolute定位元素保持預(yù)期位置而不與不同大小的視口上的其他元素重疊。
如果必須使用絕對定位，則需要為.post-it硬編碼到 HTML 中的每個創(chuàng)建 id。然后，在您的 中styles.css，指定不同視口大小的媒體查詢。
我在這里演示了媒體查詢和絕對位置：https ://codepen.io/sevanbadal/pen/ExjBKEg
這是非常乏味的，因為您必須id為每個硬編碼 new?.post-it。然后在 CSS 中將 id 添加到您指定的每個媒體查詢中。
原始響應(yīng)- 使用彈性布局
您可以使用 CSS Flexbox 布局。有關(guān)詳細(xì)信息，請查看 Mozilla CSS Flexbox 文檔。
對于您的問題，請將 flex 應(yīng)用于您的“section”類。然后使用 justify-content 調(diào)整任意數(shù)量的 div 在 Flex 布局中的顯示方式。Flex-wrap 還可以用于將 Flex-layout 的內(nèi)容分成多行。
您可能想要刪除/更改 .post-it 中的填充。
在 .section 上嘗試以下代碼：
.section{
? width: 100%;
? height: 1000px;
? background-repeat: repeat-y;
? background-size:contain;
? background-color: #8B8B8B;
? display: flex;
? flex-wrap: wrap;
}
這是 .post-it
.post-it{
? height: 100px;
? width: 100px;
? font-family: 'Monte', sans-serif;
? font-size: 25;
}
- 1 回答
- 0 關(guān)注
- 98 瀏覽
添加回答
舉報
0/150
提交
取消