如何将段落显示为内含缩写的列？

Question

我在zengarden上练习css。

I want something like this, but with no h3 column.

HTML

<div class="preamble" id="zen-preamble" role="article">
        <h3>The Road to Enlightenment</h3>
        <p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible 
            <abbr title="Document Object Model">DOM</abbr>s, broken <abbr title="Cascading Style Sheets">CSS</abbr> 
        support, and abandoned browsers.</p>
        <p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the 
            <abbr title="World Wide Web Consortium">W3C</abbr>, 
            <abbr title="Web Standards Project">WaSP</abbr>
        , and the major browser creators.</p>
        <p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
</div>

我也试过了。

.preamble :not(h3){
    display: flex;
}

I got this.

也许是因为p标签中的abbr。有没有办法实现我想要的东西？

Answer 1

看起来CSS columns很适合这里。如果标题应跨越整个宽度，则可以设置column-span属性。

您可能还需要根据自己的喜好设置段落样式(例如调整页边距)。

有关详细信息，请参阅MDN Multiple-column layout。

​

.preamble {
  columns: 3;
}

h3 {
  column-span: all;
}

<div class="preamble" id="zen-preamble" role="article">
  <h3>The Road to Enlightenment</h3>
  <p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible
    <abbr title="Document Object Model">DOM</abbr>s, broken <abbr title="Cascading Style Sheets">CSS</abbr> support, and abandoned browsers.</p>
  <p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the
    <abbr title="World Wide Web Consortium">W3C</abbr>,
    <abbr title="Web Standards Project">WaSP</abbr> , and the major browser creators.</p>
  <p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
</div>

​

Answer 2

您需要从该div中删除h3以使其居中

​

.preamble {
  display: flex;
}

h3{
  text-align: center;
}

<h3>The Road to Enlightenment</h3>
<div class="preamble" id="zen-preamble" role="article">
  <p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible
    <abbr title="Document Object Model">DOM</abbr>s, broken <abbr title="Cascading Style Sheets">CSS</abbr> support, and abandoned browsers.</p>
  <p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the
    <abbr title="World Wide Web Consortium">W3C</abbr>,
    <abbr title="Web Standards Project">WaSP</abbr> , and the major browser creators.</p>
  <p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
</div>

​