對齊頂部，中間和底部的項目不起作用

我有一個div的圖像在左邊，然後右邊的一些信息（一個跨度，一個h3和另一個跨度）。我希望圖像右側的第一個跨度位於頂部，h3位於中央，另一個跨度位於底部。但是這不起作用。同樣在分隔符div的右側，我有一個鏈接，我也希望將其放在底部，並且我希望將其放在中心位置。對齊頂部，中間和底部的項目不起作用

你知道問題在哪裏嗎？

例子：https://jsfiddle.net/ct1ghpk2/2/

HTML：

<div class="item"> 
    <img src=""> 
    <div class="item_info"> 
     <span class="align-t">Span aligned at top</span> 
     <h3>Title aligned at center</h3> 
     <span class="align-b">Span aligned at bottom</span> 
    </div> 
    <div class="item_separator"></div> 
    <div class="item_details"> 
     <span>Span aligned at center</span> 
     <a href="">Link aligned at bottom</a> 
    </div> 
    </div>

的CSS：

.item{ 
    background-color:white; 
    display: flex; 
    margin-bottom: 20px; 
    align-items: flex-start; 
    padding: 10px; 
    justify-content: space-between; 
    height: 10em; 
    border:1px solid red; 
} 

.item img{ 
    width: 20%; 
    height: 100%; 
} 

.item_info{ 
    margin-left: 10px; 
    flex-basis: 64%; 
    display:flex; 
    flex-direction:column; 
} 

.item_info .align-t{ 
    color:gray; 
    font-size: 0.8em; 
    margin-bottom: 20px; 
} 

.item_info h3{ 
    font-size: 1em; 
    text-align: justify; 
    margin-bottom: 20px; 
} 

.item-info .align-b{ 
} 

.item_separator{ 
    height:100%; 
    width:1px; 
    background-color:red; 
} 

.item_details{ 
    flex-basis: 30%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
} 

.item_details span{ 
    font-size: 0.85em; 
    margin-bottom: 10px; 
    color:gray; 
} 

.item_details a{ 
    font-size: 0.85em; 
    padding: 10px; 
    border-radius: 4px; 
    width: 100%; 
    text-align: center; 
} 


img { 
    width: 100%; 
    max-width: 100%; 
    vertical-align: middle; 
    margin: 0; 
}

來源

2017-07-31 Jakj

給.item-info 100％的高度，這是其母公司的全高度。然後，您可以將彈性盒子屬性justify-content: space-between;添加到.item-info，以使div內的內容按照您想要的方式分佈。

.item-info { 
    #yourStyles 
    height: 100%; 
    justify-content: space-between; 
}

對CSS的柔性盒的詳細信息，並在使用它提供給你的屬性見this link。

至於.item-details ...

.item_details{ 
    #yourStyles 
    height: 100%; 
    justify-content: flex-end; 
} 

.item_details span{ 
    #yourStyles 
    margin-top: 25%; 
    text-align: center; 
}

justify-content: flex-end;一列使內容開始在底部和上升...添加25％的上邊距的範圍內該div會給你你在上面尋找的空間，而其他的東西都被推到了最下面。

來源

2017-07-31 11:21:36 SidTheBeard

這不是一個準確的解決方案.items_details – Bhawna

@Bhawna我做了上述OP提供的jsfiddle中提出的更改，它對我來說工作得很好。跨度（他們希望在中心）和鏈接（他們想要在底部）是在適當的地方。讓我知道你的意思是「準確」的解決方案。 – SidTheBeard

我很抱歉，我上面發送的小提琴是不同的。我編輯過。你可以與你提供的解決方案共享一個小提琴 – Bhawna

你要求必須是這樣按我理解的解決方案。

我所做的更改就在此。

.item_details{ 
    flex-basis: 30%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    height: 100%; 
    position: relative; 
} 

.item_details span{ 
    font-size: 0.85em; 
    color:gray; 
} 

.item_details a{ 
    font-size: 0.85em; 
    border-radius: 4px; 
    width: 100%; 
    text-align: center; 
    position: absolute; 
    bottom:0; 
}

小提琴：https://jsfiddle.net/ct1ghpk2/6/

來源

2017-07-31 11:20:16 Bhawna

對齊頂部，中間和底部的項目不起作用

回答

相關問題