亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

HTML/CSS 移動布局不響應

HTML/CSS 移動布局不響應

牛魔王的故事 2023-10-24 21:13:20
我正在開發 Frontend Mentor 的 Single Price Grid 組件,但無法讓我的移動設計具有響應能力。當我縮小瀏覽器時,它的頂部就會脫離頁面頂部。這是一個鏈接: https: //single-price-grid-component.jordanchude.now.sh/這是我的存儲庫:https://github.com/jordanchude/single-price-grid-component/blob/master/index-style.css這是我的媒體查詢中的一段代碼。@media (max-width: 1000px) {.container {    display: flex;    flex-direction: column;}#bottom-row {    flex-direction: column;    box-sizing: content-box;    width: 200%;}#top-box {    display: flex;    flex-direction: column;}#bottom-right-box {    border-radius: 0px 0px 15px 15px;}#bottom-left-box {    border-radius: 0px;}#top-box, #bottom-right-box, #bottom-left-box {    box-sizing: border-box;    padding: 20px;}這也是我正在談論的內容的照片。我可以向下滾動但不能向上滾動。
查看完整描述

1 回答

?
蠱毒傳說

TA貢獻1895條經驗 獲得超3個贊

問題出在您的翻譯中,無論頁面限制如何,都會向上移動元素。


transform: translate(-50%, -50%);

您可以在媒體查詢上將轉換調整為無小分辨率,或者在使用桌面尺寸時找到另一種方法使 div 居中。


嘗試這個


@media (max-width: 1000px) {

.container {

    display: flex;

    flex-direction: column;

    transform: translate(50%, 0%);  

    top: 0;  

    left: 0; 

}


查看完整回答
反對 回復 2023-10-24
  • 1 回答
  • 0 關注
  • 109 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號