每 3 个单元格开始新的表格行
Posted
技术标签:
【中文标题】每 3 个单元格开始新的表格行【英文标题】：Start new table row every 3 cells 【发布时间】：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']); ?>" />
</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']); ?>" />
</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，但无论我输入什么数字，我都无法工作。
【问题讨论】：
【参考方案1】：以下技术之一可以满足要求：
https://youtu.be/qm0IfG1GyZU?t=711 https://youtu.be/qm0IfG1GyZU?t=184RAM（重复、自动、最小值）
.ex7 .parent
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
<div class="parent white">
<div class="box pink">1</div>
<div class="box purple">2</div>
<div class="box blue">3</div>
<div class="box green">4</div>
</div>解构煎饼
.ex2 .parent
display: flex;
flex-wrap: wrap;
justify-content: center;
.ex2 .box
flex: 1 1 150px;
/* Stretching: */
flex: 0 1 150px;
/* No stretching: */
margin: 5px;
<div class="parent white">
<div class="box green">1</div>
<div class="box green">2</div>
<div class="box green">3</div>
</div>（来源https://1linelayouts.glitch.me/）
【讨论】：
以上是关于每 3 个单元格开始新的表格行的主要内容，如果未能解决你的问题，请参考以下文章
如何添加“加载更多”单元格，按下该单元格时会向表格视图添加更多行？
HTMLHTML 表格总结 ★★★ ( 表格标签 | 行标签 | 单元格标签 | 表格标签属性 | 表头单元格标签 | 表格标题标签 | 合并单元格 )