感谢您的协助。
我有一个问题，其中我的DIV类命名为box-2只适用于部分的标题，即使我关闭它周围的整个代码。我是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类应用于所有内容，因为它为我分隔出整个部分。
EDIT:这将从分类法中提取数据，并显示为:
香蕉苹果梨柠檬葡萄桃子草莓
下面是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折叠为零高度。如果您希望它仍然包含浮动元素，请在.box-2中添加overflow: auto;规则。
您可以通过消除当前具有sl-highlights类的<div>元素并将该类应用于<li>元素来简化标记。我可能还会添加一个display: block规则，因为从技术上讲，在内联元素(<li>元素)内拥有块级元素(<h3>标记)是无效的。