纯css的响应式布局
纯css的响应式布局
提问于 2018-06-16 22:26:18
我正在努力使用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- wrapper，里面有六个带有段落的div。当我向包装器添加padding: 1px时，我得到了几乎想要的状态(只有1px的右下角倾斜)。如果我不添加它，在包装器浏览器的顶部和底部会产生16px的边距。为甚麽呢？我希望保持从"p“元素到包装器(以及到彼此)的16px距离，但我不希望包装器保持到顶部边框的16px距离。如果你能帮助我，我将不胜感激。主要目标是创建一个完全响应式的、简单的布局，并在一个位于中心的主包装器中抛出一堆元素。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-17 05:29:41
我花了几个小时准备最终的解决方案，在Jaziel_Inc的帮助下(关于如何管理页边距和填充，你可以在我的问题下面看到他的答案-谢谢Jaziel!)。我只是想这会对其他人有帮助，张贴这个完全响应式布局的最终版本，以防将来有人会搜索它。
布局有一个中心元素-包装器。其中的7个元素-这些都是带有示例文本的段落。它必须调整到不同的分辨率，保持元素之间以及元素和包装器之间的16px的间隔。每个段落的最小宽度设置为300px。中央元素设置为最大宽度为1500px。我在github https://github.com/realgs/responsiveSimpleLayout.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>
Stack Overflow用户
发布于 2018-06-16 22:39:09
我认为您需要向包装器添加一个位置，尝试将position: absolute;添加到包装器类中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50888759
复制相关文章
相似问题