我在使用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。当我向包装器添加填充：1px时，我得到几乎所需的状态（仅向右下方倾斜1px）。如果我不添加它，则在包装器浏览器的顶部和底部创建16px的边距。为什么会这样？我希望与＃34; p＆＃34;保持16px的距离。包装器（和彼此）的元素，但我不希望包装器与顶部边框保持16px的距离。我很感激你的任何帮助。 主要目标是创建一个完全响应，简单的布局，并在主要的，位于中心的包装器内抛出一堆元素。
答案 0 :(得分：2)
我认为你需要在包装器中添加一个位置，尝试将position: absolute;添加到包装器类。
答案 1 :(得分：0)
我花了几个小时准备最终解决方案，在Jaziel_Inc的帮助下（关于如何管理边距和填充，你可以在我的问题下看到他的答案 - 谢谢Jaziel！）。我认为，如果有人在将来搜索它，那么发布完全响应式布局的最终版本会对其他人有所帮助。
布局有一个中心元素包装器。其中包含7个元素 - 这些是带有示例文本的段落。它必须调整到不同的分辨率，保持元素之间和元素之间的16px的余量。包装。每个段落设置为最小宽度300px。中心元素设置为最大宽度1500px。 我发布了一个指向github https://github.com/realgs/responsiveSimpleLayout.git
的链接当然，我很感激任何反馈！
function importVauto() {
var app = SpreadsheetApp;
var import1 = app.getActiveSpreadsheet().getSheetByName('Import1');
var data = app.getActiveSpreadsheet().getSheetByName('Data');
var name = data.getRange("C24")
name.getValues()
Logger.log(name)
var file = DriveApp.getFilesByName(name).next();
var csvData = Utilities.parseCsv(file.getBlob().getDataAsString());
import1.getRange(1, 1, csvData.length, csvData[0].length).setValues(csvData);
}
/* 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;
}
}