如何保持父母的风格

Question

在foreach中有以下代码：

FOREACH:
<div class="col-md-1" style="max-width: 50% !important" id="pageList_{{ presentationPage.position }}">
    <a href="/customer/presentations/{{ id }}/edit?position={{ presentationPage.position }}">
        <div class="slide-preview" style="background-color:{% if (presentationPage.position == activePresentationPage.position) %}#ffffff{% else %}#bbbbbb{% endif %}; border: 1px solid #000000; width:100%; padding:2px 5px; margin:5px; color:#000000; text-align:center;">
                                            {{ presentationPage.position }}
        </div>
    </a>
</div>
ENDFOREACH

呈现时如下所示：

但是，当我添加类似的内容作为元素或div时，如下面的代码所示：

<div>
    FOREACH:
    <div class="col-md-1" style="max-width: 50% !important" id="pageList_{{ presentationPage.position }}">
        <a href="/customer/presentations/{{ id }}/edit?position={{ presentationPage.position }}">
            <div class="slide-preview" style="background-color:{% if (presentationPage.position == activePresentationPage.position) %}#ffffff{% else %}#bbbbbb{% endif %}; border: 1px solid #000000; width:100%; padding:2px 5px; margin:5px; color:#000000; text-align:center;">
                                            {{ presentationPage.position }}
            </div>
        </a>
    </div>
    ENDFOREACH
</div>

渲染时整个外观如下：

而且我似乎找不到原因。简单的检查不会带来任何见解。

Answer 1

这是因为放置在两个元素周围的div没有指定的宽度和高度。因此，div的宽度和高度将基于其内容的大小。然后，您的两个元素的宽度和高度将基于其父级的宽度和高度，因此它将变得很小。

因此，如果给父div设置宽度和高度，则应该可以。