Question

我需要星星标志对齐右上角，但我只能右对齐，而且它似乎从左边的文字下方开始。

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

.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

Answer 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>

图像正确放置

1 个答案: