Question

我想以这种方式放置html div：

因此，我想并排设置3个主要div。在第一个中，我需要多个div（它们位于th:each中），每个都在上一个div之下。

但是，当我在Spring应用程序的Thymeleaf中执行此操作时，它将无法工作。我好像Card Images继承属性flex-direction：row。结果，我得到这样的布局：蓝卡应对齐一列。这是我的代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/header :: head"></head>

<body>

  <header class="superhead">
    Welcome in <span class="content-header">Notes-app</span>
  </header>

  <a href="/add">Add a note</a>
  <div style="display: flex; flex-direction: row;">
    <div id="cards-wrapper" th:each="n : ${notes}" class="card-container">
      <div class="card" style="width:400px; margin: auto;">
        <img class="card-img-top" src="polaroid_2X.png" width="150" height="150" alt="Card image">
        <div class="card-body">
          <h4 class="card-title" th:text="${n.getNoteTitle()}"></h4>
          <p class="card-text" th:text="${n.getNoteContent()}"></p>
          <div style="display: flex; flex-direction: row;">
            <a href="#" class="btn btn-primary">View</a>
            <form action="/edit" method="post">
              <input type="hidden" th:value="${n.getNoteTitle()}" name="noteTitle" />
              <button class="btn btn-info" type="submit">Edit</button>
            </form>
            <form action="/delete" method="get">
              <input type="hidden" th:value="${n.getNoteTitle()}" name="delnote">
              <button class="btn btn-danger" type="submit">Delete</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div style="background-color: orange;">
      <h2>Create a note</h2>
    </div>


    <div style="background-color: yellow;">
      <h2>Find a note</h2>
    </div>


  </div>
</body>

</html>

当我将th:each替换为Cards时，一切正常。为什么它不能与th:each一起使用，如何解决？

Thymeleaf + CSS：伸缩方向在Thymeleaf中的工作方式不同吗？

0 个答案: