Question

我想要一些<section>的内容，该内容跨越整个页面宽度，不超过特定的像素宽度（此处为300px）。如果页面（即该部分）宽于该页面，则内容应水平居中。

要实现这一点，我目前正在使用一个小帮手<div>，其中a）定义了内容的最大宽度，b）使用了水平的auto边距将内容水平居中：

section {
  background-color: teal;
}

.content {
  max-width: 300px;
  margin: 0 auto;
}

<section>
  <div class="content">
    This text should be no wider than 300px.
  </div>
</section>

这很好用，但是我一直在努力摆脱仅用于布局的<div>元素。理想情况下，我可以在padding: 0 auto;元素上使用类似<section>的东西。

是否可以在不需要额外的“内容” <div>的情况下达到相同的效果？

Answer 1

您可以如下控制填充：

0    Winter 19
1    Spring 20
2    Winter 20
3    Winter 21

section {
  background-color: teal;
  padding:0 calc((100% - 300px)/2)
}

这是使用CSS网格的另一个想法：

<section>
    This text should be no wider than 300px.
</section>
<section>
    This very long long long text should be no wider than 300px.
</section>

section {
  background-color: teal;
  display:grid;
  grid-template-columns:1fr minmax(auto,300px) 1fr;
}
/*to fill the 1fr (only the :before is mandatory) */
section:before,
section:after{
  content:"";
}

这是使用flexbox的另一种方法：

<section>
    This text should be no wider than 300px.
</section>
<section>
    This very long long long text should be no wider than 300px.
</section>

section {
  background-color: teal;
  display:flex;
}

section:before,
section:after{
  content:"";
  flex-basis:calc((100% - 300px)/2);
  flex-shrink:0;
}

Answer 2

您可以执行以下操作：

section {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
}

Answer 3

您可以改用span标签，默认情况下span标签具有display:inline。您可以将span标签的显示设置为block，其行为与div（'content'）相同。

section {
 background-color: teal;
 }
 
 .content {
  display: block;
  max-width: 300px;
  margin: auto;
 }

<section>
 <span class="content">
  this very long long tex should not exceed 300px of lenght
 </span>
 </section>

如何在没有单独的<div>元素的情况下为全角<section>的内容设置最大宽度？

3 个答案: