如何调整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; 
      }