在简单的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.