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