Question

我创建了一个带有网格项目的网格，这些项目可输出WordPress主题中的自定义字段，例如，标题，字幕和摘录。

当我在带有p标签的网格中保留一些文本时，该文本将正确换行。

但是，由于伪内容已被函数替换，因此文本是单个字符串，不会包装到grid div中。

我一直在寻找解决方案，但无法破解它-任何建议都将大有帮助。

此处的代码：

HTML：

<div class="grid-item">
     <div class="grid-header">
         <div class="grid-header-text">
             <h3 class="grid-title"><?php the_title(); ?></h3>
             <h4 class="grid-subtitle"><?php the_field('grid_subtitle'); ?> </h4>
         </div>

         <div class="grid-header-icon"> 
             <i class="fas fa-angle-double-up fa-3x"></i> 
         </div>
     </div>

     <div class="grid-body">     
         <p class="content">
             <?php the_field('grid_excerpt'); ?>
         </p>
     </div>
</div>

CSS：

.feature-grid {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr 1fr;
}


.grid-item {
    border: solid black 1px;
    line-height: 2em;
    border-radius: 9px;

}

.grid-header {
    background: black;
    color: white;
    padding: 1em;
    border-radius: 8px 8px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-height: 100px;

}

.grid-body {}

一个用户要求的父项：

<div class="section grid-section">

    <div class="feature-grid">

    <?php $frontPageGrid = new WP_Query(array(
'post_type' => 'grid-item',
'posts_per_page' => 4,
'order' => 'ASC'

））;

while（$ frontPageGrid-> have_posts（））{ $ frontPageGrid-> the_post（）; ？>

        <div class="grid-item">

            <div class="grid-header">

                <div class="grid-header-text">

                    <h3 class="grid-title"><?php the_title(); ?></h2>
                        <h4 class="grid-subtitle"><?php the_field('grid_subtitle'); ?> </h3>
                </div>
                <div class="grid-header-icon"> <i class="fas fa-angle-double-up fa-3x"></i> </div>
            </div>

            <div class="grid-body">

            <p class="content">
            <?php the_field('grid_excerpt'); ?>
            </p>

            </div>
        </div>

CSS网格内容未正确包装

0 个答案: