[英]How to separate one DIV from another in HTML?
請注意，在下面的代碼中，我有幾個帶有“響應式”class 的 div，有一些方法可以將第一個水平列與第二個分開，因為這些框彼此非常接近。 並且在圖像中有文字的區域，上下有很多空格，我該如何調整？
我正在學習，我對 HTML 中的技術術語了解不多。
div.gallery { border: 1px solid #ccc; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } * { box-sizing: border-box; }.responsive { padding: 0 6px; float: left; width: 24.99999%; } @media only screen and (max-width: 700px) {.responsive { width: 49.99999%; margin: 6px 0; } } @media only screen and (max-width: 500px) {.responsive { width: 100%; } }.clearfix:after { content: ""; display: table; clear: both; }
<.DOCTYPE html> <html> <head> </head> <body> <h2>Responsive Image Gallery</h2> <h4>Resize the browser window to see the effect.</h4> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_5terre:jpg"> <img src="https.//thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Cinque Terre" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_forest:jpg"> <img src="https.//thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Forest" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_lights:jpg"> <img src="https.//thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Northern Lights" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_mountains:jpg"> <img src="https.//thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Mountains" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_5terre:jpg"> <img src="https.//thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Cinque Terre" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_forest:jpg"> <img src="https.//thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Forest" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_lights:jpg"> <img src="https.//thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403.jpg" alt="Northern Lights" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_mountains:jpg"> <img src="https.//thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-it%C3%A1lia-de-manarola-terre-de-cinque-75217403:jpg" alt="Mountains" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <div class="clearfix"></div> <div style="padding;6px:"> <p>This example use media queries to re-arrange the images on different screen sizes, for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px. it will show two images side by side, For screens smaller than 500px. the images will stack vertically (100%).</p> <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p> </div> </body> </html>
您可以通過在響應式 class 中添加一些底部邊距來在框下方添加更多空間：
.responsive {
margin-bottom: 30px; /* Adjust accordingly */
}
您還可以通過調整 desc class 的填充來減少文本上方和下方的空間量：
div.desc {
padding: 5px; /* Adjust accordingly */
}
如何分離從一個 razor 組件發送到另一個組件的 html 代碼？
[英]How to separate html code that is sent from one razor component to another?
如何使用jQuery在HTML中將div從一個位置更改為另一位置
[英]How to change div from one position to another in html using jquery
如何使用javascript將一個html頁面上的div內容與另一頁面上的div內容更改？
[英]How to change the content of a div on one html page with the contents of a div from another page using javascript?
如何在 css 和 html 中將兩個導航元素彼此分開？
[英]How do you separate two nav elements from one another in css and html?
使用onclick（jQuery / HTML）在一個div中顯示數據
[英]display data from one div in another using onclick (jQuery/HTML)
使用 jquery 將整個 html div 從一個頁面移動到另一個頁面
[英]move an entire html div from one page to another using jquery
HTML表格-顯示列中一個單元格的div內容，另一列中另一個單元格的div
[英]HTML Table - show div content from one cell in a column over another cell div in another column
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.