图像右放置答案

【问题标题】：Image Right placement图像右放置
【发布时间】：2021-02-07 07:55:11
【问题描述】：

我需要 Stars 徽标对齐右上角，但我只能右对齐，而且它似乎从左侧文本下方开始。

我在文本框上也看不到边框。

.text-box {
    background-color: #e9ebe9;
    width:90%;
    padding:20px;
    margin:12px;
    border-radius: 12px;
    border: 2px #bfc6bf;
}

 <div class="text-box">
        <p>STARS Air Ambulance<br>
        Nutrien Hangar<br>
        2475 Airport Rd<br>
        Saskatoon, SK<br>
        S7L 1M4</p>
            <img src="../images/stars-ally2.jpg" align="right" width="104" height="180" alt=""/>
                <ul class="actions">
                    <li><a href="https://stars.ca/" target="_blank" class="button icon solid fa-file">Click To Donate!</a></li>
                </ul>
    </div>

Text box with image below text instead of right aligned

【问题讨论】：

标签： html css image vertical-alignment

【解决方案1】：

尝试使用 display flex 和 justify-content。你可以在这里阅读：Display-flex 您还需要设置边框类型（实线、虚线...）。

.text-box {
    background-color: #e9ebe9;
    width:90%;
    padding:20px;
    margin:12px;
    border-radius: 12px;
    border: 2px solid #bfc6bf;
    display: flex;
    justify-content: space-between;
}

<div class="text-box">
<div>
        <p>STARS Air Ambulance<br>
        Nutrien Hangar<br>
        2475 Airport Rd<br>
        Saskatoon, SK<br>
        S7L 1M4</p>
        <ul class="actions">
                    <li><a href="https://stars.ca/" target="_blank" class="button icon solid fa-file">Click To Donate!</a></li>
                </ul>
        </div>
        <div>
            <img src="../images/stars-ally2.jpg" align="right" width="104" height="180" alt=""/>
            </div>
    </div>

【讨论】：