Question

h1, p {
  font-family: futura; sans-serif;
  margin: 20px 20px 0px 20px;
}

.section {
  background-color: tomato;
  padding: 50px;
  margin: 0 auto;
}

.container {
  background-color: white;
  padding: 5px;
  margin:  10px 20px;
  text-align: center;
  display: inline-block;
  height: 250px;
}

<div class="section">
<div class="container">
  <h1>This is a title</h1>
  <p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
  </div>
<div class="container">
  <h1>This is another title</h1>
  <p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
</div>
<div class="container">
  <h1>This is a third title</h1>
  <p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
</div>
</div>

我正在尝试提高使用CSS组织内容的能力。这是我真正遇到的困难，并且阅读了许多不同的文章并观看了所有视频，但还没有点击。我想了解如何做到这一点，除了不依赖柔韧性盒之外，还应结合响应式设计理想。下一步是Flexbox，但我想先掌握此阶段。

我练习了在简单的三张牌内容部分中添加样式。我能够将箱子水平排列。现在有几个问题。

除非我给出最大宽度，否则卡片将不会在同一行上对齐，我不确定这是响应式设计的最佳实践。
.container内容不在.section类中。我已经做了'margin：0 auto;'但这不会影响它。
我也尝试向.container类添加相对位置属性，但这似乎无关紧要。
当我将视口调整为移动视图时，文本会溢出到白色容器的底部。如何获得容器的高度以适应其中的内容？

Answer 1

尝试使用CSS Flex功能。示例：

h1, p {
  font-family: futura; sans-serif;
  margin: 20px 20px 0px 20px;
}

.section {
  background-color: tomato;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container {
  width:80%;
  background-color: white;
  text-align: center;
  padding: 5px;
  margin:  10px 20px;
}

<div class="section">
<div class="container">
  <h1>This is a title</h1>
  <p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
  </div>
<div class="container">
  <h1>This is another title</h1>
  <p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
</div>
<div class="container">
  <h1>This is a third title</h1>
  <p>This is the body copy for the section in which we read more about the aforementioned subject matter within the title.</p>
</div>
</div>

Answer 2

您的查询表明您想在Flexbox之前学习样式技术，因此我根据Christopher Schmitt http://christopher.org/css-floats-to-display-columns-in-any-order/的本教程挖出了我在2011年建造的古董原型，并将其作为钢笔发布给您查看。 https://codepen.io/cwebba1/pen/agxMzQ

<div><p>Check it out <a href="https://codepen.io/cwebba1/pen/agxMzQ">Here</a></p></div>

我也把它放在here。

克里斯托弗·施密特（Christopher Schmitt）的原始教程仍在进行中，他有他写的书的链接。您可以从他的教程中看到，他使用浮点数，行内块和百分比宽度进行布局，并使用负边距来控制内容在页面上的显示顺序。我正在重新设计网页，但我仍然使用此模式。

此外，当我刚开始学习CSS时，我发现了一本便宜的小书CSS in Easy Steps。它将引导您快速了解级联和样式元素。

关于您的项目，我建议使用百分比来设置宽度，然后更改百分比并向更宽的媒体查询布局添加内联块。

如何仅使用CSS更好地掌握布局

2 个答案: