一个看似简单的布局如下所示, 要求文字内容居中，且一行不超过65个字符。如果正文中有图片，则图片宽度等于页面宽度。
文字内容宽度有上限
但其中如果出现图片，则可以占满空间
这个要求是非常合理的，因为在阅读文字时，一行过长的文字会让人产生跨行疲劳，影响体验。有研究表明，针对罗马字符，一行65个字符时，用户体验最佳。但阅读图片时，则不需要做这样的限制，反而充满页面宽度的图片会显得更加优雅。
能够实现这个效果的方法有很多，最简洁的应该是使用 grid布局，解法如下：
.wrapper {
display: grid;
grid-template-columns:
1fr
min(65ch, 100%)
1fr;
}
.wrapper > * {
grid-column: 2;
}
.full-bleed {
width: 100%;
grid-column: 1 / 4;
}
<main class="wrapper">
<h1>Some Heading</h1>
<p>Some content and stuff</p>
<img class="full-bleed" alt="cute meerkat" src="/meerkat.jpg" />
</main>
网友评论