0

我正在尝试在 2x5 表格中显示“与团队会面”页面，并使用之前的网页设计师在 Wordpress 中编写的代码。

这是我正在查看的页面 - http://www.stirling-house.com/about-us/meet-the-team正如我所说，我想在表格中显示图片，这样看起来更整洁。

我的代码是 -

<div id="maintext">
    <h1>MEET THE TEAM</h1>
    <h3>THE STIRLING HOUSE ADMINISTRATION TEAM</h3>
    <?php $members =get_posts('numberposts=99&cat=4&order=ASC'); //print_r($members); 
    foreach ($members as $post) {
    setup_postdata($post);?> 
    <div class="member-box">
        <img src="<?php echo get('member_photo');?>" alt="" style="margin:5px 7px 0 0;" />
        <h3><?php echo $post->post_title;?></h3>
        <h4><?php echo get('member_designation');?></h4>

谁能帮忙？！

4

2 回答 2

0

大多数网页设计师（2005 年后左右）认为<table>元素不应该用于布局/设计。如果您将以下 CSS 规则添加到您的网站，样式表：

.member-box { display: inline-block; }

您将得到如下所示的内容：http: //imgur.com/DzEkLAU

很抱歉间接回答，但我认为这是你真正想要的答案......;）

于 2013-11-08T11:42:24.993 回答
0

一种方法是在 foreach 之前添加一个计数器（例如，$n），将其初始化为零并在每次循环完成时递增。然后，让所有奇数的 div 向左浮动，偶数的 div 向右浮动。

这就是代码的样子（或多或少）：

<? 
$n = 0; // Counter
foreach($members as $post){
    if($n % 2) $style="float:left";
    else $style="float:right";

    <img src="<?php echo get('member_photo');?>" alt="" style="margin:5px 7px 0 0;" />
    <h3><?php echo $post->post_title;?></h3>
    <h4><?php echo get('member_designation');?></h4>

如果这不起作用，您可以尝试使用table布局并在 $n 行之后放置<tr>标签（每次添加时重置计数器<tr>）。

于 2013-11-08T11:39:05.203 回答