<div className="content"> <div style={{ float: "left" }}> {pedido.nombre}</div> //name <div style={{ float: "right" }}> ${pedido.precio}</div> //price</div>它應(yīng)該在左側(cè)顯示名稱(chēng)，在右側(cè)顯示價(jià)格，但它保留在另一側(cè)在那里
3 回答
幕布斯6054654
TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超7個(gè)贊
關(guān)鍵是justify-content: space-between：
.content {
display: flex;
justify-content: space-between;
}
<div class="content">
<div style="background: yellow">Product name</div>
<div style="background: orange">Price</div>
</div>
兩個(gè) div 之間會(huì)有空間。
一只名叫tom的貓
TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超3個(gè)贊
雖然 Flexbox 方法工作得非常好，但我想展示如何使用float.
這是CSS
.float--left {
float: left
}
.float--right {
float: right
}
.clear {
clear: both;
}
和一些 HTML
<div class="float--left">name</div>
<div class="float--right">price</div>
<div class="clear">other content</div>
*注意：添加了如何使用清除將浮動(dòng)行為重置回正常狀態(tài)的示例*
米脂
TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超3個(gè)贊
Flexbox 將幫助您：
這是 HTML：
<div class="content">
<div class="left">
Left Side
</div>
<div class="right">
Right Side
</div>
</div>
這是 CSS：
.content{
display: flex;
}
.right{
margin-left: auto;
}
- 3 回答
- 0 關(guān)注
- 150 瀏覽
添加回答
舉報(bào)
0/150
提交
取消