Question

学习引导程序，切换为flex。这是下面的代码。如何在与图片水平的位置上修饰文字。

Screenshot 如何实现？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <title>Document</title>
    <style>
        div {
            border: darkgreen 1px solid;
        }
        </style>
</head>
<body>
    <div class="container">
        <div class="d_flex justify-content-start">
            <div> 
                <img src="img/apple.jpg" alt="Spanish apple">
            </div>
            <div>
                <span>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit asperiores nemo reprehenderit quis ducimus. Ipsa cum quasi similique in unde consequatur? Ducimus molestias esse praesentium eos repellendus quidem ad blanditiis, ullam quo architecto, vero voluptate. Modi vitae quia aperiam iste id sit! Nemo, minima obcaecati.
                </span>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

Answer 1

我找到了解决方法。

IN

使图片与文字对齐

1 个答案: