在没有最大宽度的情况下右对齐图像答案

【问题标题】：Align image right without maxwidth在没有最大宽度的情况下右对齐图像
【发布时间】：2020-08-08 20:06:48
【问题描述】：

您好，我正在尝试使用 PHP 制作一些入场券。我希望 QR 码与标题文本的右侧对齐。问题是，它总是在屏幕的最右边。由于标题可能会因不同的格式而改变，所以我不能硬编码绝对位置或在整个 div 上使用 max-width 属性。

这是我的 HTML

<div class= "content"  ID ="carte" style=" padding:0;">
    <div  style="  text-align: left; font-weight:bolder; overflow:hidden; white-space:nowrap;">
    <img src="logovoltaic.png" height = 50 align = "left" style="padding-right:10px"/>
        <div class="" style=" overflow:hidden; align:center;font-size: 38px; padding-left:20px; padding-top: 5px;  overflow:visible;">Carte d'enregistrement <br>
        </div>
    </div>

    <div style="   padding:0;font-size: 20px; padding-top: 5; vertical-align: top; font-weight:bold; align:left;">
    Veuillez présenter cette carte à votre arrivée en studio
    </div>
    <div style="font-size: 20px; padding-top: 10px; vertical-align: top; font-weight:regular;float:left">
    Nom: <?= isset($_GET['prenominput']) ? htmlspecialchars($_GET['prenominput']) : ''; ?> <?= isset($_GET['prenominput']) ? htmlspecialchars($_GET['nominput']) : ''; ?><br>
    Adresse courriel: <?= isset($_GET['courrielinput']) ? htmlspecialchars($_GET['courrielinput']) : ''; ?><br>
    Identifiant: <?= isset($_GET['matriculeinput']) ? htmlspecialchars($_GET['matriculeinput']) : ''; ?>

    </div>



    <div style=" padding:10;font-size: 30px; padding-top: 0; margin-right: 0px;vertical-align: top; font-weight:bolder;" align = "right">
        <?php
        if(isset($_GET["matriculeinput"])){
        generate();



        }
        ?>
    </div>
    <button type="button" name="button" class= "button" onclick="collapseme('carte');collapseme('formulaire')">Éditer vos informations</button>
</div>

generate() 函数只是简单地回显 QR 码图像。同时，“collapseme()”函数只是一种根据用户所处的步骤显示/隐藏页面部分的方法。

【问题讨论】：

你应该使用 class 或 ids 而不是 inline 样式，保持更新是一团糟。如果您有标题，请使用 hx 标签，您甚至可以将您的二维码设置在文本前面，如果您使用旧的编码方式，则将其浮动；）它将在任何地方工作并被理解；）

标签： html css image

【解决方案1】：

<div class= "content"  ID ="carte" style=" padding:0;">
    <div  style="  text-align: left; font-weight:bolder; overflow:hidden; white-space:nowrap;">
    <img src="logovoltaic.png" height = 50 align = "right" style="padding-right:10px"/>
        <div class="" style=" overflow:hidden; align:center;font-size: 38px; padding-left:20px; padding-top: 5px;  overflow:visible;">Carte d'enregistrement <br>
        </div>
    </div>

    <div style="   padding:0;font-size: 20px; padding-top: 5; vertical-align: top; font-weight:bold; align:left;">
    Veuillez présenter cette carte à votre arrivée en studio
    </div>
    <div style="font-size: 20px; padding-top: 10px; vertical-align: top; font-weight:regular;float:left">
    Nom: <?= isset($_GET['prenominput']) ? htmlspecialchars($_GET['prenominput']) : ''; ?> <?= isset($_GET['prenominput']) ? htmlspecialchars($_GET['nominput']) : ''; ?><br>
    Adresse courriel: <?= isset($_GET['courrielinput']) ? htmlspecialchars($_GET['courrielinput']) : ''; ?><br>
    Identifiant: <?= isset($_GET['matriculeinput']) ? htmlspecialchars($_GET['matriculeinput']) : ''; ?>

    </div>



    <div style=" padding:10;font-size: 30px; padding-top: 0; margin-right: 0px;vertical-align: top; font-weight:bolder;" align = "right">
        <?php
        if(isset($_GET["matriculeinput"])){
        generate();



        }
        ?>
    </div>
    <button type="button" name="button" class= "button" onclick="collapseme('carte');collapseme('formulaire')">Éditer vos informations</button>
</div>

只改变图片标签属性 align left to right(align = "right")

【讨论】：