我正在尝试在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>
谁能帮忙?!
一种方法是在 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>
时重置计数器)。
大多数网页设计师(2005年后左右)认为<table>
元素不应该用于布局/设计。如果将以下 CSS 规则添加到站点,则样式表:
.member-box { display: inline-block; }
你会得到看起来像这样的东西:https://i.stack.imgur.com/EkeL3.jpg
很抱歉间接回答,但我认为这是您真正想要的答案...... ;)