我第一次尝试使用flexbox在图片旁边放置文字。我有4个div在里面 .flex-container
: 1.图片 2.标题 3.按钮 4.文字。问题只出在4 - text.不知何故,它不能完美地工作,你可以在屏幕上看到,因为文字被放置在图像下方。
html.html.css: 1.图片 2.标题 3.按钮 4.文字.不知为何,你可以在屏幕上看到完美的工作,因为文字放在图片下面。
<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:
.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;
}
你的第四个DIV被放置在下面的图像,因为他们是在一个共同的容器和。flex-wrap
是活动的。
如果要将Div#4直接放在#2和#3下面,请将这三者(即2、3和4)放入一个单独的包装物中。div
(在您当前的flex-container内),您应用的是 display: flex
和 flex-wrap: wrap
擦掉 flex-wrap: wrap
从当前的设置中 .flex-container
.