我在 div 上應用 flexbox 時遇到了一些問題。
這是問題：
<div class="annual-plan">
<div class="icon">
<i class="fas fa-music"></i>
</div>
<div class="pricing">
<h3>Annual Plan</h3>
<span>$59.99/year</span>
</div>
<a href="#">Change</a>
</div>
整個代碼用一個名為 content-section 的類包裝在 div 中
我嘗試使用以下 css 定位它：
.content-section .annual-plan .pricing{
display: flex;
flex-direction: column;
justify-content: space-between;
}
但仍然沒有生效，而且你看不到它們之間的空間。
我檢查了 chrome 的開發工具，它沒有被任何其他代碼覆寫。
我做錯了什么，我該如何解決？
uj5u.com熱心網友回復：
洗掉默認的padding上h3一個和鳥巢代碼container然后應用柔性盒每個和使用justify-content: space-between;空間的元素。
.annual-plan {
background-color: lightgrey;
border-radius: 30px;
width: 400px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 30px;
}
h3 {
margin-bottom: .5rem;
}
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
padding: 0px;
}<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<div class="container">
<div class="annual-plan">
<div class="icon">
<i class="fas fa-music">Logo</i>
</div>
<div class="pricing">
<h3>Annual Plan</h3>
<span>$59.99/year</span>
</div>
<a href="#">Change</a>
</div>
</div>uj5u.com熱心網友回復：
正如您所描述的，這里的問題只是您選擇了錯誤的選擇器。您已明確針對該中央.pricingdiv，但它對我來說就像您希望將整個.annual-plan呈現為一列一樣……如果是這樣，您應該嘗試.pricing從上面代碼中的選擇器中洗掉。
也就是說，有一些額外的顏色等等。
.annual-plan {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
/* extra styles just for fun */
background: lightgrey;
border-radius: 12px;
padding: 1em;
min-height: 12em;
max-width: 33.3333%;
}
.annual-plan .pricing {
text-align: center;
}
/* more styles just for fun */
h3 {
margin: 0;
}<div class="annual-plan">
<div class="icon">
<i class="fas fa-music">??</i>
</div>
<div class="pricing">
<h3>Annual Plan</h3>
<span>$59.99/year</span>
</div>
<a href="#">Change</a>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/396000.html
下一篇：如何在CSS和HTML中使用過渡