在簡單的html模板中填充和定位的問題
[英]Problem in padding and positioning in a simple html template
問題描述
有人可以告訴我如何使框中的文本可以向下推以停止重疊並且文本不應該超出框外嗎？ 另外，我需要在列框中留一些邊距。
有媒體查詢並忽略那個。 我只想知道如何更改 CSS 以使文本不會從框中溢出，而且我也不想使用 overflow 屬性。 還有如何為列框提供邊距，只要框保持在行中。
代碼 CSS 和 HTML -->
* { box-sizing: border-box; margin: 0; padding: 0; font-family: Impact, Charcoal, sans-serif; } div.row div { background-color: gray; border: 1px black solid; position: relative; } .heading{ margin: 30px; margin-bottom: 70px; text-align:center; } /*For large devices*/ @media (min-width: 992px){ .col-lg-3{ float : left; width: 33.33%; } } /*For medium devices*/ @media (min-width: 768px) and (max-width: 991px){ .col-md-2{ float:left; width: 50%; } .col-md-12{ float: left; width: 100%; } } /*For small devices*/ @media (max-width: 767px){ .col-sm-12{ float:left; width: 100%; } } h2.item1 { position: absolute; background-color: orange; top: 0; right: 0; padding: 2%; } h2.item2 { position: absolute; background-color: green; top: 0; right: 0; padding: 2%; } h2.item3 { position: absolute; background-color: skyblue; top: 0; right: 0; padding: 2%; } section { padding: 2%; }
<!DOCTYPE html> <html> <head> <title>Our Menu</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1 class="heading">Our Menu</h1> <div class="row"> <div class="col-sm-12 col-md-2 col-lg-3"> <h2 class="item1">Chicken</h2> <section class="desc1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui zfiofficia deserunt mollit anim id est laborum.</section> </div> <div class="col-sm-12 col-md-2 col-lg-3"> <h2 class="item2">Beef</h2> <section class="desc2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section> </div> <div class="col-sm-12 col-md-12 col-lg-3"> <h2 class="item3">Sushi</h2> <section class="desc3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section> </div> </div> </body> </html>
1 個解決方案
解決方案1
1 2020-09-30 11:19:08
通過將position設置為absolute position ，您將從文檔的正常“流”中刪除html ，因此您無法應用正常的 css 屬性，例如margin 。
為了避免這種情況，您應該將h2的right float ，然后應用邊距以防止您的文本被隱藏在元素下。
* { box-sizing: border-box; margin: 0; padding: 0; font-family: Impact, Charcoal, sans-serif; } div.row div { background-color: gray; border: 1px black solid; position: relative; } .heading{ margin: 30px; margin-bottom: 70px; text-align:center; } /*For large devices*/ @media (min-width: 992px){ .col-lg-3{ float : left; width: 33.33%; } } /*For medium devices*/ @media (min-width: 768px) and (max-width: 991px){ .col-md-2{ float:left; width: 50%; } .col-md-12{ float: left; width: 100%; } } /*For small devices*/ @media (max-width: 767px){ .col-sm-12{ float:left; width: 100%; } } h2.item1, h2.item2, h2.item3 { background-color: orange; padding: 2%; display: inline-block; float: right; margin: .3rem; } h2.item2 { background-color: green; } h2.item3 { background-color: skyblue; } section { padding: 2%; } .desc1, .desc2, .desc3{ padding: 1rem; margin: 0.5rem; }
<!DOCTYPE html> <html> <head> <title>Our Menu</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1 class="heading">Our Menu</h1> <div class="row"> <div class="col-sm-12 col-md-2 col-lg-3"> <h2 class="item1">Chicken</h2> <section class="desc1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui zfiofficia deserunt mollit anim id est laborum.</section> </div> <div class="col-sm-12 col-md-2 col-lg-3"> <h2 class="item2">Beef</h2> <section class="desc2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section> </div> <div class="col-sm-12 col-md-12 col-lg-3"> <h2 class="item3">Sushi</h2> <section class="desc3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section> </div> </div> </body> </html>
子元素的簡單定位問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.