Question

因此，我尝试使用百里香在html页面上显示五个框。我有所有数据。盒子被创建。但我认为我的每句话都错了。我正在打印所有内容，但垂直居中并留有大量边距。所有的盒子都应该水平打印在一行中。这是它的外观图像。 what is printing

您将看到所有元素都以它们自己的线向下打印。 chrome的检查器中突出显示了一个大的橙色边距。盒子应该在那个橙色的地方。 div#forecastbox0应包含五个天气输出。相反，它包含一个。如果我删除该元素，它将重复五行，其中所有数据都延伸到边缘。因此，它会在创建时重复创建新的行/ div，但我不确定为什么。谢谢您的帮助！

这是片段。这是我想重复的。

 <div th:fragment="fiveDayForecast" id="forecastBox0" 
th:each="fiveDayForecastBox : ${fiveDayForecastBox}">
<!--                    <div class="row align-middle h-25">-->
                    <h4 class="date" align="center" 
th:text="${fiveDayForecastBox.day}"></h4>

 <!--                    <p class="low" th:text="${fiveDayForecastBox.min}"></p>-->
                    <img class="icon" th:src="${fiveDayForecastBox.icon}"/>
                <div id="HASH">
                    <span class="high" th:text="${fiveDayForecastBox.max}" ></span>
                    <span class="low" th:text="${fiveDayForecastBox.min}"></span>
                </div>
        </div>

这是片段的调用位置。

<div class="container h-100" th:if="${not 
#lists.isEmpty(fiveDayForecastBox)}">
 <!--            <div th:each="fiveDayForecastBox : 
${fiveDayForecastBox}">-->
<!--            <div id ="forecastBox0">-->
            <div th:replace="fragments/fiveDayForecastBoxes :: 
fiveDayForecast" th:each="fiveDayForecastBox : ${fiveDayForecastBox}"/>
<!--            </div>-->
    </div>

css是否相关

#forecastBox0 {
height: 225px!important;
width: 225px!important;
box-shadow: black;
margin: auto;
}
.low, high {
font-size: 20px;
bottom: 35px;
}

显示元素水平百里香

0 个答案: