2017-08-25 55 views
1

我目前正在開發我的第一個網站。我已經到了一個地方,我有兩個div放在flexbox裏面。兩個div都有百分比的寬度和高度尺寸。但是,當我縮小網站時,右側div與左側div重疊。如果他們要重疊,我希望他們被放置在彼此之下。 (這是關於右側內容div重疊左側內容div)我不希望我的div在flexbox內重疊

我已經包含了我的HTML和CSS代碼。

HTML:

<div class="content"> 
       <div class="left-side-content"> 
        <div class="intro"> 
         <div class="brands"> 
          <a href="#"><img src="images/logo%20ster.png" id="logo-ster"/></a> 
         </div> 

         <p class="top-title">Banner and endcard</p> 
         <h1>STER</h1> 
         <p class="intro-text">"STER" is a beauty, make-up and lifestyle channel on YouTube hosted by the 16 y/o Aster Marcus.</p> 
         <button class="view-project-button">View Project</button> 
        </div> 
       </div> 

       <div class="right-side-content"> 
        <img src="images/sponsorloop-collage.png"/> 
       </div> 

</div> 

CSS:

.content { 
    display: flex; 
    align-items: center; 
    height: 80%; 
    width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
} 

.content .left-side-content { 
    width: 30%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
} 

.content .right-side-content { 
    width: 70%; 
    display: flex; 
    align-items: center; 
    justify-content: flex-end; 
} 

回答

0

flex-wrap屬性添加到.content

而且,而是採用width左,右內容,請使用flex-basis代替,或將其納入速記flex,如下面的代碼片段...

.content { 
 
    display: flex; 
 
    align-items: center; 
 
    height: 80%; 
 
    width: 90%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    flex-wrap: wrap; 
 
} 
 

 
.content .left-side-content { 
 
    flex: 1 0 30%; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.content .right-side-content { 
 
    flex: 1 0 70%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-end; 
 
}
<div class="content"> 
 
    <div class="left-side-content"> 
 
    <div class="intro"> 
 
     <div class="brands"> 
 
     <a href="#"><img src="images/logo%20ster.png" id="logo-ster" /></a> 
 
     </div> 
 

 
     <p class="top-title">Banner and endcard</p> 
 
     <h1>STER</h1> 
 
     <p class="intro-text">"STER" is a beauty, make-up and lifestyle channel on YouTube hosted by the 16 y/o Aster Marcus.</p> 
 
     <button class="view-project-button">View Project</button> 
 
    </div> 
 
    </div> 
 

 
    <div class="right-side-content"> 
 
    <img src="https://placehold.it/300x300" /> 
 
    </div> 
 

 
</div>

+0

感謝很快回答我。但我遇到了一些麻煩。我將網站分成不同的部分,每個部分都有一個全屏視圖。並且,當我應用您建議的更改時,我縮小屏幕時將右側內容div放置在下一個「部分」中。 –