如何調整divs？

Question

我需要將段落div移到左側，並一直展開到圖片。頂部div應該顯示在兩行上，並在節日之後打破。這兩段應該在圖像的左側。如何讓div正確顯示？

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; 
 
}

<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>

這是我想它看起來像

Answer 1

將與content類父容器的paragprah元素，然後將這個容器在DIV與container類。 後來申請的CSS樣式，如下

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%; 
 
}

<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>

Answer 2

使p元素等於100％的width屬性。這將在整個屏幕上呈現它。如果這不起作用，請將包含p元素的div的寬度設置爲100％。不知道你想用'頂級'做什麼。如果你試圖居中，你可以這樣做：

 p { 
      text-align: center; 
      }