代码之家 › 专栏 › 技术社区 › Frerich Raabe

如何在收缩内容之前将<DIV>元素的填充缩小为零?

css html

Frerich Raabe · 技术社区 · 7 年前

我正试图将注意力集中在创建响应性网页上,目前正在尝试了解HTML布局引擎如何决定何时缩小哪些区域。

我的目标是有两个嵌套的div,外部的一个在两侧使用填充以便于阅读,内部的一个显示实际内容:

.section {
  padding-left: 10%;
  padding-right: 10%;
  background-color: red;
}

.content {
  background-color: blue;
}

<div class="section">
  <div class="content">
    Hello, World!
  </div>
</div>

折叠填充(即红色区域),只有当填充消失后,内容区域才会变小。有人知道如何让它工作吗?

2 回复 | 直到 7 年前

dcangulo 7 年前

.section {
  background-color: red;
}

.content {
  background-color: blue;
  margin: 0 auto;
  width: 300px;
}

<div class="section">
  <div class="content">
    Hello, World!
  </div>
</div>

我不知道这是否是你想要的。我只是简单地给出了答案 content 固定的宽度并将其居中。

为了让它变得更灵敏,我建议你和 内容 的width属性在不同的 @media

Nik 7 年前

您可以通过使用css媒体查询来实现这一点。 Here Here 是媒体查询相关的东西,可以帮助。

   @media only screen and (max-width: 900px) {
    .section {
        background-color: lightblue;
        padding-left: 5%;
        padding-right: 5%;
    }
}

@media only screen and (max-width: 600px) {
    .section {
        background-color: lightblue;
        padding-left: 0;
        padding-right: 0;
    }
}

推荐文章