2017-09-23 61 views
0
<!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的右下角?就像这样:CSS flex div image to the right

enter image description here

回答

2

添加此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>