HTML - 使用显示 : inline or do it another way 时如何将文本放在另一行文本下

Question

我想把书的价格放在书名下面，而不是放在图片下面。

当前外观:

search.html:

.resultContainer {
  width: 100%;
  position: relative;
  left: 0;
  margin-top: 30px;
  margin-bottom: 20px;
  padding: 10px;
  border-bottom: black solid 1px;
}

.bookImage,
.bookTitle {
  margin-left: 20px;
}

<div class="resultContainer">
  <div style="display: inline;">
    <img class="bookImage" src=" https://marketplace.canva.com/MAB___U-clw/1/0/thumbnail_large/canva-yellow-lemon-children-book-cover-MAB___U-clw.jpg" alt="  book.title " width="120" height="160">
    <span class="bookTitle">
                Title Here<br/>
                <span class="bookPrice">
                    Price Here
                </span>
    </span>
  </div>
  <div class="bookTitle"></div>
</div>

Answer 1

一种方法是使用 flexbox

.resultContainer {
  display: flex;
}

.wrapper {
  display: flex;
  align-self: center;
}

.bookImage,
.bookTitle {
  margin-left: 20px;
}

<div class="resultContainer">
  <img class="bookImage" src="https://picsum.photos/200" alt=" {{ book.title }} " width="120" height="160">
  <div class="wrapper">
    <span class="bookTitle">
            Sample Book Title <br/>
            <span class="bookPrice">
                $399
            </span>
    </span>
  </div>
  <div class="bookTitle"></div>
</div>