[英]HTML CSS flexbox text next to image
I'm trying to use flexbox for the first time to put text next to image.我第一次尝试使用 flexbox 将文本放在图像旁边。 I have 4 divs inside
.flex-container
: 1.image 2.title 3.button 4.text.我在
.flex-container
有 4 个 div:1.image 2.title 3.button 4.text。 The problem is only with 4 - text.问题仅在于 4 - 文本。 Somehow it doesn't work perfectly as you can see on the screen because text is placed below the image.
正如您在屏幕上看到的那样,它以某种方式无法完美运行,因为文本位于图像下方。
html: html:
<div class="details-section">
<div class="container-fluid">
<div class="flex-container">
<div>
<img src="{{ product.image }}"
class="details-img">
</div>
<div class="details-title"> {{ product.name }} </div>
<div class="details-price-button">{{ product.price }} PLN
<button (click)="addToCart()"
class="btn btn-secondary btn-sm">Add to cart
</button>
</div>
<div class="details-description">{{ product.details }}</div>
</div>
</div>
</div>
css: css:
.flex-container{
padding-top: 40px;
display: flex;
flex-wrap: wrap;
}
.details-section {
margin-top: 60px
}
.details-title {
padding-left: 400px;
font-size: 25px;
font-weight: 600;
text-align: center;
height: 100px;
}
.details-price-button{
margin-left: 150px;
margin-top: 5px;
float: right;
font-weight: 500;
height: 100px;
}
.details-img {
border-radius: 8px;
}
.details-description {
margin-left: 450px;
margin-bottom: 200px;
padding-bottom: 200px;
height: 200px;
}
Your fourth DIV is placed below the image because they are in a common container and flex-wrap
is active.您的第四个 DIV 位于图像下方,因为它们位于一个公共容器中并且
flex-wrap
处于活动状态。
To have Div#4 directly under #2 and #3, put these three (ie 2, 3 and 4) into a separate wrapper div
(inside your current flex-container) to which you apply display: flex
and flex-wrap: wrap
, and erase flex-wrap: wrap
from the settings of the current .flex-container
.要将 div#4 直接放在 #2 和 #3 下,请将这三个(即 2、3 和 4)放入一个单独的包装
div
(在您当前的 flex-container 中),您将对其应用display: flex
和flex-wrap: wrap
, 并从当前.flex-container
的设置中删除flex-wrap: wrap
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.