如何为带有图像和标题的报价创建布局？

Question

我想要这样的布局：

我的尝试：

.container{
  padding: 10 px;
  gap: 10 px;
  flex-direction: row;
}
figcaption{
  font-size: smaller;
  text-align: end;
}

<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, iste incidunt fuga aliquam veniam mollitia enim nam deserunt magni iure repudiandae aspernatur reprehenderit totam quia aut laborum quos, vel quis!</blockquote>

<figure class="container">
<figcaption>
  <strong>John Doe</strong><br>
  Long title blablablablabla<br>
  Company X
</figcaption>
<img class="col2" src="https://placehold.co/600x400">
<figure>

我不知道如何让它变得更好。你能帮我改进一下吗？

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: flex;
            align-items: center;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        .text-container {
            flex: 1;
            text-align: left;
            margin-right: 20px;
        }

        .quote {
            margin-bottom: 20px;
            font-size: 1.2em;
        }

        .image-container {
            flex: 0 0 auto;
        }

        .image-container img {
            max-width: 150px;
            height: auto;
        }

        .caption {
            font-weight: bold;
        }

        .sub-caption {
            font-size: 0.9em;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text-container">
            <div class="quote">
                Lorem ipsum dolor sit amet consectetur adipiscing elit. Cumque, iste incidunt fuga aliquam veniam mollitia enim nam deserunt magni iure repudiandae aspernatur reprehenderit totam quia aut laborum quos, vel quis!
            </div>
            <div class="caption">John Doe</div>
            <div class="sub-caption">Long title blablablablabla<br>Company X</div>
        </div>
        <div class="image-container">
            <img src="https://placehold.co/160x320" alt="Image Description">
        </div>
    </div>
</body>
</html>

如何为带有图像和标题的报价创建布局？

问题描述投票：0回答：1

1个回答

最新问题

如何为带有图像和标题的报价创建布局？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1