Я хочу поместить html div таким образом:
Итак, я хочу, чтобы 3 основных div бок о бок. В первом мне нужно много div (они есть в th:each), и каждый из них находится под предыдущим.
Но когда я делаю это в Thymeleaf в моем приложении Spring, это не работает. Мне кажется, что 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, как это исправить?