Elemente im Raster anzeigen?

Question

Ich versuche, meine Portfolio-Elemente in einem Gürtel anzuzeigen, kann es aber nicht ganz herausfinden. Idealerweise möchte ich, dass die Thumbnails 3 oder 4 anzeigen (wobei der Rest eine zweite und/oder dritte Zeile bildet). Sobald die Thumbnails angeklickt sind, möchte ich, dass sie auf meine normale Post-Seite geht.

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%; 
} 

portfolio.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(); ?> 

functions.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

Dies sollte das sein, was Sie suchen.

Sie können hardcodieren es war gut mit PHP, wenn Sie eine Tabelle verwenden möchten, wenn Sie nicht bekommen, dass CSS funktioniert, aber das ist technisch nicht gut Codieren.