使用 CSS 制作響應式網格

Question

我正在嘗試制作一個響應式主頁。 然而，我無法實現我想要的。 我會用一些代碼和圖像更好地解釋。

目前我的主頁看起來像這樣，

首先，我想讓底部的兩個按鈕與圖像對齊，記住頂部的 3 個按鈕與圖像的頂部對齊。

我嘗試添加邊距和填充，但它破壞了響應式設計中的頁面。 我希望頁面完整（響應）至少為 1024p。 我可以管理低於 1024 的其他內容（可能是將模板更改為套件從 480p 到 1023p）。

 .HomeContent { float: left; width: 90%; height: 100%; color: #c4c4c4; margin: 1% 5%; } .HomeContent #LeftImageBox { float: left; width: 45%; height: 100%; border: solid 1px; margin-right: 1%; } .HomeContent #LeftImageBox img { float: right; display: block; width: 100%; } .HomeContent #RightContentBox { float: left; width: 54%; height: 100%; border: solid 1px; } .HomeContent #TopMenuBox,#WelcomeBox,#SubRightBox1 { float: left; width: 100%; height: 50%; border: solid 1px; margin: 0 1px 1px 0; } .HomeContent .tile-grid { text-align: justify; } .HomeContent .tile-grid li { display: inline-block; margin: 0; } .HomeContent .tile-grid: after { content: ''; width: 100%; /* Ensures there are at least 2 lines of text, so justification works */ display: inline-block; } .HomeContent .tile-grid span { background-color: #f26323; border: none; color: white; padding: 15px 50px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; cursor: pointer; } .HomeContent .tile-grid span: hover { background-color: white; color: #f26323; }

 <div class="HomeContent"> <div id="LeftImageBox"> <img alt="" src="http://dummyimage.com/498x500/4f4f4f/ffffff.png" /> </div> <div id="RightContentBox"> <div id="TopMenuBox"> <ul class="tile-grid"> <li><a><span>bathroom</span></a></li> <li><a><span>kitchen</span></a></li> <li><a><span>laundry</span></a></li> </ul> </div> <div id="WelcomeBox"> <h1><span>This is ASOS</span></h1> <h3><span>YOUR ONE-STOP<br />FASHION DESTINATION</span></h3> <p>Shop from over 850 of the best brands, including ASOS' own label.Plus, get your daily fix of the freshest style, celebrity and music news.</p> </div> <div id="SubRightBox1"> <ul class="tile-grid"> <li><a><span>new products</span></a></li> <li><a><span>tips &amp; trends</span></a></li> </ul> </div> </div> </div>

Answer 1

每當瀏覽器尺寸縮小時，使用@media進行更改。

例如：

@media (max-width: 1024px) {
    // Here is an example:
    // When the browser size shrinks down to 1024px or less,
    // The background-color of the body will change to red.
    body {
        background-color: red;
    }
}

當您將瀏覽器的大小調整為大於 1024 像素時，紅色背景色將被移除。

Answer 2

我通過將::after class 添加到<p>標記並增加行高來解決方法。 它進一步按下按鈕。 它適用於 1024p 以上的任何內容。 我將對 1024P 進行另一個媒體查詢，並制作低於該級別的任何內容的移動版本。