html - 如何保持 parent 的风格

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 一个宽度和高度，它应该没问题。