Question

这是我的网站：http://www.gosmartbrands.net/

我希望在优惠券结束的每个列元素之间添加一个空格，并列出下一个商家名称。添加换行符似乎打破了页面。这是我正在使用的代码：

<?php
/**
 * The template for displaying all pages marked home.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package Smart Brands

 */

get_header(); ?>

    <?php while ( have_posts() ) : the_post(); ?>

    <div class="hero-wrapper"> <!-- Start .hero-wrapper -->

        <div class="hero container_12">

            <img src="<?php echo $cfs->get('hero_image'); ?>" alt="img-hero-01" border="0" class="hero-image" />

            <div id="call-to-action" class="grid_6">

                <?php echo $cfs->get('hero_content'); ?>                

            </div>

        </div>

    </div>
    <!-- End .hero-wrapper -->

    <div class="feature-wrapper"> <!-- Start .feature-wrapper -->

        <div id="features" class="container_12"> <!-- Start features -->

<?php
$fields = $cfs->get('features');
$i = 0;
foreach ($fields as $field) {
    $i++;
    echo '<div class="grid_8"> <!-- Start .feature --><div class="feature">';
  echo '<a href="'.$field['feature_link'].'"><img src="' . $field['icon'] . '" alt="smartbrand icon" width="139" height="160" class="floatLeft feature-icon"></a>';
  echo '<h4><a href="'.$field['feature_link'].'">'.$field['title'].'</a></h4>';
  echo '<div class="mobile-text"><p class="justify">'.$field['text'].'</p></div>';
  echo '<a href="#" data-reveal-id="coupon-modal-'.$i.'" class="coupon"><span><img src="'.$field['coupon_promo_text_img'].'" alt="" border="0" /></span><img src="'.$field['coupon_image'].'" class="responsive" alt="" />
<h1>'.$field['coupon_title'].'</h1></a>';
  echo '</div><!-- End .feature --></div>';
  echo '<div id="coupon-modal-'.$i.'" class="reveal-modal">';
  echo '<div align="center"><div class="coupon-border"><img src="'.$field['coupon_pdf_image'].'" class="responsive" /></div><a class="download-btn" href="'.get_template_directory_uri().'/download.php?

file='.$field['coupon_pdf'].'">Click to download</a></div>';
  echo '<a class="close-reveal-modal">&#215;</a></div>';

}
endwhile; // end of the loop.

 ?>
        </div>
        <!-- End container_12 -->

    </div>
    <!-- End .feature-wrapper -->




<?php get_footer(); ?>

CSS样式表：

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package Smart Brands
 */

get_header(); ?>

    <div id="primary" class="content-area">
        <div id="content" class="site-content" role="main">

            <?php while ( have_posts() ) : the_post(); ?>

                <?php get_template_part( 'content', 'page' ); ?>

                <?php
                    // If comments are open or we have at least one comment, load up the comment template
                    if ( comments_open() || '0' != get_comments_number() )
                        comments_template();
                ?>

            <?php endwhile; // end of the loop. ?>

        </div><!-- #content -->
    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Answer 1

在CSS第303行将margin-bottom添加到您的班级feature，请参阅以下内容：

.feature {
    margin-bottom: 20px; /*this is new - choose the size you want*/
    overflow: hidden;
    text-align: right;
}

Answer 2

顺便说一句，第二个代码集不是CSS文件。你应该找到CSS文件并将padding-top属性添加到.grids中，并用你希望将它们分开的数量。

间距问题表

2 个答案: