知识点：

1、box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

2、column-rule属性设置列之间的宽度，样式和颜色。

 column-rule:1px solid rgba(0,0,0,0.3);

3、选择每个

元素的首字母，并为其设置样式：

       p:first-letter{

           font-size:200%;

           color:#8A2BE2;
       }

<div id="wrap">
  <article>
    <h1>Prince William says keeping a stiff upper lip can damage health</h1>
    <p> <img src="img/william.jpg" alt=""> </p>
    <p class="intro">The British "stiff upper lip" should not be allowed to endanger mental health, the Duke of
      Cambridge has said.</p>
    <p>He said he wanted his children to grow up able to express their feelings.</p>
    <p>Prince William has also teamed up with pop star Lady Gaga - in a video call they spoke about the importance of
      people talking about their struggles.</p>
    <p>It comes after Prince Harry revealed he sought help after nearly 20 years "not thinking" about the death of
      their mother, Diana, Princess of Wales.</p>
    <h2>'Tipping point'</h2>
    <p>Prince William's comments on the "stiff upper lip" came in an interview - alongside Prince Harry - with a
      magazine produced by the charity Campaign Against Living Miserably (Calm), which is dedicated to preventing male
      suicide.</p>
    <ul>
      <li>Prince Harry 'in total chaos' over mother Diana's death</li>
      <li>'Like Prince Harry, I blocked out my mum's death'</li>
    </ul>
    <p>Prince William talked about his "tipping point", which was his exposure to suicide - the biggest killer of men
      aged under 45 in the UK - through his work as an air ambulance pilot.</p>
    <p>He told Calm that while there might be a time and a place for the "stiff upper lip", it should not be at the
      expense of people's health.</p>
    <p>The future king and his brother are using the intense interest they generate to focus attention on a cause they
      are increasingly passionate about, BBC royal correspondent Peter Hunt said.</p>
    <h2>Lady Gaga call</h2>
    <p>Prince William spoke to Lady Gaga, as part of the Heads Together #oktosay campaign to encourage people to speak
      out about their mental health challenges.</p>
    <p>The pair discussed how speaking freely on mental health problems can help shatter the stigma around them.</p>
    <p> <img src="./img/lady gaga.jpg" alt=""> </p>
    <p>Lady Gaga said the series of films produced by the charity told "beautiful stories".</p>
    <p>"It reminded me how much my mental health changing changed my life," she told him, from her home in Los
      Angeles.</p>
    <p>"There's a lot of shame attached to mental illness, you feel like something's wrong with you. In my life I go
      'look at all these beautiful, wonderful things that I have, I should be so happy'.</p>
    <p>"But you can't help it if in the morning when you wake up you are so tired, so sad, so full of anxiety and the
      shakes that you can barely think."</p>
    <p>She said discussing her mental health "was like saying, this is a part of me, and that's ok".</p>
    <p><img src="./img/bbc news daily.png" alt=""></p>
    <p>Sign-up to get news from the BBC in your inbox, each weekday morning</p>
    <p><strong>The duke has also said it was important for role models to open up about their mental health -
        including grime artist Stormzy.</strong></p>
    <p>"The recent interview by Stormzy about his depression was incredibly powerful and will help young men feel that
      it's a sign of strength to talk about and look after your mind as well as your body," he said.</p>
    <h2>'Close to breakdown'</h2>
    <p>Prince William said he and the Duchess of Cambridge wanted their children - George and Charlotte - to grow up
      able to talk about their emotions and feelings.</p>
    <p>Prince Harry has acknowledged that he did not do that.</p>
    <p>In an interview with the Daily Telegraphon Monday, he said it had not been until his late 20s that he had
      processed the grief of losing his mother when he was 12 in 1997. </p>
    <p>Before reaching that point, he had endured two years of "total chaos" and come close to a "complete breakdown",
      he said.</p>
    <p><img src="./img/george.jpg" alt=""></p>
    <p>Prime Minister Theresa May praised the princes speaking out about mental health issues.</p>
    <p>"The bravery of those in public positions who speak out about their experiences helps smash the stigma around
      mental health and will help thousands of people to realise they are not alone."</p>
    <p>Mental health charity Mind described Prince Harry's interview as a "true turning point".</p>
    <p>The two princes, along with the Duchess of Cambridge, are promoting the Heads Together mental health campaign,
      the London Marathon's charity of the year.</p>
    <p> <em> A two-part series, Mind Over Marathon, starts on BBC One at 21:00 BST on Thursday 20 April, as part of a
      </em> Minds Matter series of programming about mental health issues. </p>
  </article>
</div>

css

body,
div,
h1,
h2,
p {
  margin: 0;
  padding: 0;
}

p {
  font: 1em Georgia, "Times New Roman", Times, serif;
}

article {
  display: block;
}

#wrap {
  /* box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 */
  box-sizing: border-box;
  width: 1258px;
  margin: 0 auto;
  padding: 1.5em;
  background-color: #e7ded1;
  column-count: 3;
  column-width: auto;
  column-gap: 2em;
  /* column-rule属性设置列之间的宽度，样式和颜色。 */
  column-rule: 1px solid rgba(0, 0, 0, 0.3);
}

#wrap img {
  max-width: 100%;
}

h1 {
  font-size: 2rem;
  color: #1e1e1e;
  margin-bottom: 1em;
}

p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1em;
  ;
}

/* 选择每个 <p> 元素的首字母，并为其设置样式： p:first-letter{ font-size:200%; color:#8A2BE2; } */
.intro::first-letter {
  font-size: 3em;
  float: left;
  margin-right: 0.1em;
  line-height: 1em;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5em;
}

202103081615186730147456