纯CSS中的响应式布局
[英]Responsive layout in pure css
问题描述
我在CSS和HTML方面苦苦挣扎，遇到了很大的陷阱。 我的HTML代码是：
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* Code comes below */ body { background-color: lightgray; } .wrapper { width: 100%; background-color: #feecec; } .info { width: 100%; } .pink { padding: 5px; margin: 16px; font-family: arial; font-size: 16px; color: #111; border-radius: 5px; border: 1px solid #cf894c; background-color: #fdeddc; } .blue { padding: 5px; margin: 16px; font-family: arial; font-size: 16px; color: #111; border-radius: 5px; border: 1px solid #3f79b7; background-color: #e8f6ff; } @media only screen and (min-width: 600px) { .wrapper { width: 100%; margin: 0 auto; } } @media only screen and (min-width: 900px) { .wrapper { width: 100%; margin: 0 auto; } } @media only screen and (min-width: 1200px) { .wrapper { width: 100%; margin: 0 auto; } } @media only screen and (min-width: 1500px) { .wrapper { width: 1500px; margin: 0 auto; } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <div class="pink"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div class="blue"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div class="pink"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div class="blue"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div class="pink"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div class="blue"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div class="pink"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> </div> </body> </html>
我有一个div包装器，里面有六个div段落。 当我向包装中添加padding：1px时，我几乎得到了所需的状态（仅右下角倾斜了1px）。 如果我不添加它，则在包装浏览器的顶部和底部会创建一种16px的边距。 为什么会这样呢？ 我想保持从“ p”元素到包装器（以及彼此）的16px距离，但是我不希望包装器保持与顶部边框的16px距离。 谢谢您的帮助。 主要目标是创建一个完全响应的，简单的布局，并将一堆元素扔到位于中央的主包装器中。
2 个解决方案
解决方案1
2 2018-06-16 14:39:08
我认为您需要在包装器中添加position: absolute; ，请尝试添加position: absolute; 包装类。
解决方案2
0 已采纳 2018-06-16 21:29:40
在Jaziel_Inc的一些帮助下，我花了几个小时准备最终解决方案（关于如何管理边距和填充，您可以在我的问题下方看到他的回答-谢谢Jaziel！）。 我只是认为对其他人发布完全响应式布局的最终版本会有所帮助，以防将来有人搜索。
该布局具有中央元素包装器。 其中有7个元素-这些是带有示例文本的段落。 必须将其调整为不同的分辨率，以在元素之间以及元素与包装之间保持16px的边距。 每个段落的最小宽度设置为300px。 中心元素设置为最大宽度1500px。 我发布了指向github https://github.com/realgs/sensitiveSimpleLayout.git的链接
当然，我感谢您的任何反馈！
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* ---------- Actual code comes below ---------- */ body { background-color: lightgray; } .wrapper { width: 100%; background-color: #feecec; padding: 16px 0; font-size: 0; } .pink { min-width: 300px; padding: 5px; margin: 16px; font-family: arial; font-size: 16px; color: #111; border-radius: 5px; border: 1px solid #cf894c; background-color: #fdeddc; } .blue { min-width: 300px; padding: 5px; margin: 16px; font-family: arial; font-size: 16px; color: #111; border-radius: 5px; border: 1px solid #3f79b7; background-color: #e8f6ff; } .up{ margin: 0 16px 16px 16px; } .down{ margin: 16px 16px 0 16px; } @media only screen and (min-width: 600px) { .wrapper { width: 100%; margin: 0 auto; } } @media only screen and (min-width: 900px) { .wrapper { width: 100%; margin: 0 auto; padding: 8px 0; } .pink { display: inline-block; position: relative; margin: 8px 8px 8px 16px; width: -webkit-calc(50% - 36px); width: calc(50% - 36px); max-width: 564px; } .blue { display: inline-block; position: relative; margin: 8px 16px 8px 8px; width: -webkit-calc(50% - 36px); max-width: 564px; } div #seven { width: 100%; margin: 8px 16px 8px 16px; max-width: calc( 100% - 44px); } } @media only screen and (min-width: 1200px) { .pink { margin: 8px 8px 8px 8px; width: -webkit-calc(33.33333% - 33.33px); width: calc(33.33333% - 33.33px); max-width: 478px; } .blue { margin: 8px 8px 8px 8px; width: -webkit-calc(33.33333% - 33.33px); max-width: 478px; } div #seven { width: 100%; margin: 8px 16px 8px 16px; max-width: calc( 100% - 44px); } div #one, #four { margin: 8px 8px 8px 16px; } } @media only screen and (min-width: 1500px) { .wrapper { width: 1500px; } div #one, #two, #three, #four { margin: 8px 8px 8px 8px; width: 343px; } div #seven, #six, #five { margin: 8px 8px 8px 8px; width: 466.66px; } div #one, #five { margin: 8px 8px 8px 16px; } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <div id="one" class="pink up"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="two" class="blue"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="three" class="pink"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="four" class="blue"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="five" class="pink"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="six" class="blue"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="seven" class="pink down"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> </body> </html>
响应式纯CSS菜单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.