如何调整div？

Question

我需要将段落div移到左边，它一直扩展到图像。 top-div应显示在两行上，并在节日之后中断。两段都应该在图像的左侧。如何正确显示div？

＆＃13;

＆＃13;

body {
  width: 8.5in;
}

.container {
  display: flex;
  background: red;
}

.top-div {
  display: table;
  background: rgb(204, 255, 102);
  text-align: center;
  font-size: 1.75em;
  font-weight: bold;
  color: rgb(35, 66, 113);
}

.top-div>p {
  margin: 10px;
}

.paragraph {
  align-self: flex-end;
  background: blue;
}

.flower-img {
  display: table;
  float: left;
}

＆＃13;

<div class="container">
  <div class="top-div">
    <p lang="zh">Qingming Festival<br>qīng míng jié</p>
  </div>
  <div class="paragraph">
    <p>The Qingming or Ching Ming Festival, also known as Tomb-Sweeping Day in English, is a traditional Chinese festival on the first day of the fifth solar term of the traditional Chinese lunisolar calendar. This makes it the 15th day after the Spring
      Equinox, either 4 or 5 April in a given year. Other common translations include Chinese Memorial Day and Ancestors&#39; Day.</p>
    <p>It is also a time for people to go outside to enjoy the spring such as having a picnic or flying a kite. In 2017 Qingming Festival falls on April 4. The three-day public holiday in China is April 3–5, 2017.</p>
  </div>
  <div>
    <img src="//dummyimage.com/300x450" alt="flower" width="300" class="flower-img">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这就是我想要的样子

Answer 1

将paragprah元素放在具有类content的父容器中，然后将此容器放在包含类container的div中。 然后应用css样式如下

＆＃13;

＆＃13;

body {
  width: 10.5in;
}

.container {
  background: red;
}

.content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
}

.top-div {
  background: rgb(204, 255, 102);
  text-align: center;
  font-size: 1.75em;
  font-weight: bold;
  color: rgb(35, 66, 113);
}

.top-div>p {
  margin: 0;
}

.paragraph {
  background: blue;
  height: 100%;
}

＆＃13;

<div class="container">

  <div class="content">

    <div class="paragraph">
      <div class="top-div">
        <p lang="zh">Qingming Festival
          <br>qīng míng jié</p>
      </div>
      <p>The Qingming or Ching Ming Festival, also known as Tomb-Sweeping Day in English, is a traditional Chinese festival on the first day of the fifth solar term of the traditional Chinese lunisolar calendar. This makes it the 15th day after the Spring
        Equinox, either 4 or 5 April in a given year. Other common translations include Chinese Memorial Day and Ancestors&#39; Day.</p>
      <p>It is also a time for people to go outside to enjoy the spring such as having a picnic or flying a kite. In 2017 Qingming Festival falls on April 4. The three-day public holiday in China is April 3–5, 2017.</p>
    </div>
    <div>
      <img src="//dummyimage.com/300x450" alt="flower" width="300" class="flower-img">
    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使p元素的width属性等于100％。这将在整个屏幕上呈现它。如果这不起作用，请将包含p元素的div的宽度设置为100％。不知道你想用＆＃39; top-div＆＃39;做什么。如果你试图将它居中，你可以这样做：

       p {
             text-align: center;
          }