【发布时间】：2021-08-23 10:55:41
【问题描述】：
我正在使用 ACF 获取游艇列表（自定义帖子类型），然后将其输出到表格中。
我可以尝试将这些布局为 Div，但这种特殊的设计意味着它作为一个表格更容易（中间有边界和波动的高度，我希望以相同的高度显示）。
问题是，由于这些是动态填充的，我无法将表格放在 html 中，因此无法找到每个表格行只有 3 个单元格宽的方法。
有没有办法让每 3 个单元格自动开始一个新行？此外，有没有办法根据屏幕宽度来改变它。
目前帖子不是在 HTML 中的表格中而是在 CSS 中设置的，但我都尝试过。
我的代码是：
<div class="the-latest-listings">
<div class="listings-table-row">
<?php
$args = array(
'post_type' => 'yachts',
'posts_per_page' => 9,
'orderby' => 'date',
'order' => 'DESC',
'meta_query' => array(
array(
'key' => 'sale_or_charter',
'value' => 'sale',
)
),
);
$my_posts = new WP_Query($args);
if ( $my_posts->have_posts() ) {
while ( $my_posts->have_posts() ) : $my_posts->the_post();
?>
<div class='latest-yacht-wrapper'>
<div class="single-latest-yacht-container">
<div class="latest-yacht-image">
<?php
$image = get_field( "preview_yacht_image", get_the_ID() );?>
<a href="<?php the_permalink(); ?>">
<img src="<?php echo esc_url($image['url']); ?>" title="<?php echo esc_attr($image['title']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
</a>
</div>
<div class="latest-yacht-blue-container">
<div class="sale-status-tab">
<p><?php echo the_field( "sale_or_charter", get_the_ID() );?></p>
</div>
<h4><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h4>
<div class="teaser-details">
<?php if( get_field('price', get_the_ID() ) ){ ?>
<p class="latest-price">EUR <?php echo get_field( "price", get_the_ID() );?></p>
<p class="divider">|</p>
<?php }; ?>
</div>
</div>
</div>
</div>
<div class="yacht-spacer">
<div class="vertical-line"></div>
</div>
<?php
endwhile;
wp_reset_postdata();
}
?>
</div>
</div>
认为与问题相关的 CSS
#page .the-latest-listings {
border-top: 1.3px solid rgba(28,34,64,.3);
border-bottom: 1.3px solid rgba(28,34,64,.3);
margin-top: 60px;
display: table;
width: 100%;
table-layout: fixed;
}
.listings-table-row {
display: table-row;
}
.latest-yacht-wrapper {
display: table-cell;
}
.single-latest-yacht-container {
padding: 78px 0;
}
.yacht-spacer {
width: 50px;
display: table-cell;
position: relative;
}
我尝试将 .latest-yacht-wrapper 设置为 33% 宽度，但它不起作用。我也试过这些：
while($('.the-latest-listings ').find('tr:last').children(':gt(2)').length > 0){
$('.the-latest-listings ').find('tr:last').after(
$('.the-latest-listings ').find('tr:last').children(':gt(2)')
.wrapAll('<tr></tr>').parent().remove()
);
}
与
while($('.the-latest-listings').find('tr:last').children(':gt(2)').length > 0){
var newRow = '';
$('.the-latest-listings').find('tr:last').children(':gt(2)').each(function(i,e){
newRow += $(e).prop('outerHTML');
}).remove();
$('.the-latest-listings').find('tr:last').after('<tr>' + newRow + '</tr>');
}
我也尝试像这样切换到 html 中的表格布局：
<table class="the-latest-listings">
<tr class="listings-table-row">
<?php
$args = array(
'post_type' => 'yachts',
'posts_per_page' => 9,
'orderby' => 'date',
'order' => 'DESC',
'meta_query' => array(
array(
'key' => 'sale_or_charter',
'value' => 'sale',
)
),
);
$my_posts = new WP_Query($args);
if ( $my_posts->have_posts() ) {
while ( $my_posts->have_posts() ) : $my_posts->the_post();
?>
<td class='latest-yacht-wrapper'>
<div class="single-latest-yacht-container">
<div class="latest-yacht-image">
<?php
$image = get_field( "preview_yacht_image", get_the_ID() );?>
<a href="<?php the_permalink(); ?>">
<img src="<?php echo esc_url($image['url']); ?>" title="<?php echo esc_attr($image['title']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
</a>
</div>
<div class="latest-yacht-blue-container">
<div class="sale-status-tab">
<p><?php echo the_field( "sale_or_charter", get_the_ID() );?></p>
</div>
<h4><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h4>
<div class="teaser-details">
<?php if( get_field('price', get_the_ID() ) ){ ?>
<p class="latest-price">EUR <?php echo get_field( "price", get_the_ID() );?></p>
<p class="divider">|</p>
<?php }; ?>
</div>
</div>
</div>
</td>
<td class="yacht-spacer">
<div class="vertical-line"></div>
</td>
<?php
endwhile;
wp_reset_postdata();
}
?>
</tr>
</table>
然后是这个：
var $td = $(".listings-table-row td");
$td.each(function(i){
if (i % 3 == 0) {
$td.slice(i, i+3).wrapAll('<tr/>')
}
}).parent('tr').unwrap();
But again, no luck.
在我写这篇文章时，我意识到考虑到间隔将意味着它不是 3 个 TD，但无论我输入什么数字，我都无法工作。
【问题讨论】：
标签： html wordpress html-table advanced-custom-fields acfpro