如何在这个PHP代码中正确显示这些链接按钮?

时间:2012-08-20 18:10:43

标签: php html css

我正在尝试为php脚本添加一些额外的链接。

以下是原始代码:

        <div id="content-left">
        <h4>Recent Work</h4>
        <?php query_posts('posts_per_page=2&cat=-8,-52,-53,-54'); ?>

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

        <div class="home-blog-feed">
          <?php the_post_thumbnail(array(130, 70, true)); ?>

            <div class="home-feed-right">
            <span class="home-title"><?php the_title(); ?></span>
            <span class="home-description"><?php echo get_post_meta($post->ID, 'Caption', true); ?></span>
            <span class="home-link"><a href="<?php the_permalink() ?>">View Gallery</a></span>
            </div>
        </div>
        <?php endwhile; ?>
        <a href="http://www.mysite.com/blog/" class="button feed">View More</a>
<?php endif; ?>

该代码产生以下输出:

screenshot

我正在尝试在“查看更多”按钮下添加两个额外的按钮。当我添加代码时,按钮显示在父div的顶部,最后显示在“Recent Work”和第一张图片后面。

我是php的新手,对于为什么它没有出现在“查看更多”按钮下方的任何帮助将不胜感激。我尝试使用echo命令和'\ n'来创建中断,但它没有生效。

此外,这是我尝试在“查看更多”按钮下添加的编码按钮的示例:

<a class="large-button" href="http://www.mysite.com/my-specified-page/">View Page</a>

以下是页面:

http://www.aimeehurstphotography.com/wedding-photography-2/

以下是左侧内容输出的CSS:

#content-left {
width:330px;
float:left;
height:auto;
padding:0;
margin:0;}

.home-blog-feed {
    width:100%;
    height:auto;
    float:left;
    padding:0 0 10px 0;
    margin-bottom:7px;}
.home-blog-feed img {
    text-align:left;
    float:left;
    margin:0 18px 0 0;
    vertical-align:top;
    border:#CCC solid 1px;
    padding:5px;
    background:#FFFFFF;}

    .home-feed-right {
        width:170px;
        float:left;}

    .home-title {
        font-weight:bold;
        width:100%;
        display:block;
        margin-bottom:5px;
        font-family:Arial, Helvetica, sans-serif;
        font-size:14px;}
    .home-description {
        font-weight:normal;
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        padding:0;
        display:block;
        margin:0 0 5px 0;
        color:#666;
    }
    .home-link a {
        font-weight:normal;
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        display:block;
        color:#008080;
    }
    .home-link a:hover {
        color:#960;
    }

3 个答案:

答案 0 :(得分:1)

听起来像是浮动问题。尝试添加

<br style="clear:both;" />

两个按钮之间。当然,您可以而且应该为此目的添加样式表类。

答案 1 :(得分:0)

您需要更改要提取的帖子数量。我在页面上添加另外两个项目时没有看到任何问题。

<?php query_posts('posts_per_page=4&cat=-8,-52,-53,-54'); ?>

答案 2 :(得分:0)

您可以使用以下代码: <a href="http://www.mysite.com/blog/" class="button feed" style="float:left">View More</a><br /> <a class="large-button" href="http://www.mysite.com/my-specified-page/" style="float:left">View Page</a>