右側的CSS flex div圖片

Question

<!DOCTYPE html>
<html>
<head>
<style> 
.div1 {
    border: 1px solid red;
    display: flex;
    align-items: flex-start;
}
</style>
</head>
<body>

<div class="div1">
    123<br>456<br>789
    <img src="smiley.gif">
</div>
</div>

</body>
</html>

我使用此代碼制作一個flex div 。 左側有一些文本，右側有圖像。 我使用align-items: flex-start; 這樣圖像就不會拉伸。 代碼效果很好，但是有沒有辦法將圖像始終移到div的右下角？ 像這樣：

Answer 1

添加此CSS規則即可實現

.div1 img {
    margin-left: auto;         /*  push it to right  */
    align-self: flex-end;      /*  push it to bottom  */
}

堆棧片段

 .div1 { border: 1px solid red; display: flex; align-items: flex-start; } .div1 img { margin-left: auto; align-self: flex-end; }

 <div class="div1"> 123<br>456<br>789<br> 123<br>456<br>789 <img src="http://placehold.it/50/f00"> </div>

右側的CSS flex div圖片

問題描述

1 個解決方案

解決方案1
2 已采納 2017-09-23 19:31:41

右側的CSS flex div圖片

問題描述

1 個解決方案

解決方案1 2 已采納 2017-09-23 19:31:41

解決方案1
2 已采納 2017-09-23 19:31:41