感谢您的协助。
我遇到一个问题，即使我在整个代码中都将其关闭，名为box-2的DIV类也仅将其自身应用于该部分的标题。我是PHP的新手，所以我想知道是否有什么我要忽略的。
<div class="box-2 shadow">
<?php if (get_field('highlights')) { //Sub speciality ?>
<div itemprop="Restuarant Highlights">
<h3 class="content-title">Highlights</h3>
<ul>
<?php $terms = get_field('highlights'); ?>
<?php foreach ($terms as $term){ ?>
<li><div class="sl-highlights"><span class="icon-ok-circled"><?php echo $term->name; ?></span></div></li>
<?php } ?>
</ul>
</div>
</div>
<div class="clearboth"></div>
<?php } ?>
我需要将box-2类应用于所有内容，因为它对我来说占据了整个部分的空间。
编辑：这从分类法中提取数据，并将其显示为：
香蕉苹果梨柠檬葡萄桃子草莓
这是CSS：
.box-2 {
width: 100%;
border-top: 1px solid rgba(0,0,0,.05);
margin-bottom: 7px;
padding: 12px 0 3px 0;
}
.sl-highlights {
float: left;
margin-right: 4%;
font-size: 14px;
min-width: 135px;
line-height: 25px;
}
.content-title {
font-size: 18px;
color: #444;
padding-bottom: 9px;
font-weight: bold;
font-family: 'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;
}
非常感谢您提供的所有帮助！
每当您将浮动样式应用于元素时，就将其从常规文档流中删除；基本上，元素不会保留通常会保留的空间。因为这就是通常定义它的容器的高度，容器趋于崩溃到下一个元素的高度是在正常流动。
在您的情况下，由于所有具有内容的元素都是浮动的，因此box-2折叠到零高度。如果您希望它仍然包含浮动元素，请向添加一个overflow: auto;规则.box-2。
您可以通过消除<div>当前具有sl-highlights类的元素来简化标记，而将类应用于<li>元素。我可能还会添加一条display: block规则，因为从技术上讲，<h3>在嵌入式元素（<li>元素）中包含块级元素（标签）是无效的。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句