我是网络新手,遇到了这个问题。图片必须在右侧,所有其他元素在左侧。让所有东西在垂直方向上都处于同一水平,但它只是这样出来的,
请帮助解决问题。
.second-part {
height: 4.67%;
background-color: white;
padding: 20px 30px;
border: 15px dolid black;
font-weight: 100;
}
.subtitle-for-second-part {
display: flex;
}
.subtitle-for-second-part h2 {
text-transform: uppercase;
}
.describe-for-second-subtitle {
display: flex;
}
.describe-for-second-subtitle p {
font-size: 12px;
}
.with-button-second-part {
display: flex;
}
.button-second-part {
border: 1px solid black;
border-radius: 35px;
background-color: white;
}
.with-phone-picture {
display: flex;
justify-content: flex-end;
}
<div class="second-part">
<div class="subtitle-for-second-part">
<h2>this is bouncy</h2>
</div>
<div class="describe-for-second-subtitle">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui <br> blanditiis praesentium voluptatum deleniti atque corrupti quos <br> dolores et quas molestias excepturi sint occaecati cupiditate non <br> provident, similique sunt in culpa qui officia
deserunt mollitia <br> animi, id est laborum et dolorum fuga. Et harum quidem rerum <br> facilis est et expedita distinctio. </p>
</div>
<div class="with-button-second-part">
<button class="button-second-part">Read more</button>
</div>
<div class="with-phone-picture">
<img src="res/images/phone-for-second-part.png" alt="phone">
</div>
</div>
1 个回答