css - 在网格中显示元素？

Question

我正试图在一个网格中显示我的投资组合元素，但不太明白。理想情况下，我希望缩略图显示 3 或 4(其余部分形成第二和/或第三行)，一旦单击缩略图，我希望它转到我的正常帖子页面。

CSS-

/* Portfolio */

#content { 
    width: 603px; 
}

#portfolio-item { 
    display: inline;
    float: left; 
    margin: 0 0 0 60px; 
    width: 280px; 
}

#portfolio-item h1 { 
    font-size: 16px; 
    margin: 20px 0 5px 0; 
}

#portfolio-item img { 
    height: 50%;
    width: 50%;
}

投资组合.php:

<?php
/*
Template Name: Portfolio
*/
?>
<?php get_header(); ?>
    <div id="portfolio">
    <?php 
        $loop = new WP_Query(array('post_type' => 'portfolio', 'posts_per_page' => 10)); 
    ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <?php   
        $custom = get_post_custom($post->ID);
        $screenshot_url = $custom["screenshot_url"][0];
        $website_url = $custom["website_url"][0];
    ?>
        <div id="portfolio-item">
        <a href="<?=$website_url?>"><?php the_post_thumbnail(); ?> </a>
        <?php the_content(); ?>
    </div>
        <?php endwhile; ?>  
        </div><!-- #content -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

函数.php:

<?php // sidebar functions

if(function_exists('register_sidebar'))
{
    register_sidebar();
}

// portfolio functions

    add_action('init', 'create_portfolio');
    function create_portfolio() {
        $portfolio_args = array(
            'label' => __('Portfolio'),
            'singular_label' => __('Portfolio'),
            'public' => true,
            'show_ui' => true,
            'capability_type' => 'post',
            'hierarchical' => false,
            'rewrite' => true,
            'supports' => array('title', 'editor', 'thumbnail')
        );
        register_post_type('portfolio',$portfolio_args);
    }

// custom input- portfolio backend

    add_action("admin_init", "add_portfolio");
    add_action('save_post', 'update_website_url');
    function add_portfolio(){
        add_meta_box("portfolio_details", "Portfolio Options", "portfolio_options", "portfolio", "normal", "low");
    }
    function portfolio_options(){
        global $post;
        $custom = get_post_custom($post->ID);
        $website_url = $custom["website_url"][0];

    }
    function update_website_url(){
        global $post;
        update_post_meta($post->ID, "website_url", $_POST["website_url"]);
    }

// detail columns- portfolio backend

add_filter("manage_edit-portfolio_columns", "portfolio_edit_columns");
add_action("manage_posts_custom_column",  "portfolio_columns_display"); 
function portfolio_edit_columns($portfolio_columns){
    $portfolio_columns = array(
        "cb" => "<input type=\"checkbox\" />",
        "title" => "Project Title",
        "description" => "Description",
    );
    return $portfolio_columns;
}
function portfolio_columns_display($portfolio_columns){
    switch ($portfolio_columns)
    {
        case "description":
            the_excerpt();
            break;              
    }
}

// add thumbnail support

add_theme_support('post-thumbnails');

// disable autoformat with raw

function my_formatter($content) {
    $new_content = '';
    $pattern_full = '{(\[raw\].*?\[/raw\])}is';
    $pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
    $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);

    foreach ($pieces as $piece) {
    if (preg_match($pattern_contents, $piece, $matches)) {
    $new_content .= $matches[1];
    } else {
    $new_content .= wptexturize(wpautop($piece));
    }
    }

    return $new_content;
    }

    remove_filter('the_content', 'wpautop');
    remove_filter('the_content', 'wptexturize');

    add_filter('the_content', 'my_formatter', 99);


?>

Answer 1

http://www.cssbakery.com/2010/07/image-grid-using-css-floats_6950.html

这应该是您要查找的内容。

如果 CSS 无法正常工作，如果您想使用表格，则可以使用 PHP 对其进行硬编码，但从技术上讲，这不是好的编码。