我正在使用ACF获取游艇列表(自定义帖子类型(，然后将其输出到表中。
我可以试着把这些放成Divs，但这种特殊的设计意味着它作为一张桌子要容易得多(中间有边界和波动的高度，我想显示相等的高度(。
问题是，由于这些是动态填充的，我无法在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;
}
我试着把最新的游艇包装设定为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，但无论我输入什么数字，我都无法获得任何TD。
以下技术之一可以满足要求：
- https://youtu.be/qm0IfG1GyZU?t=711
- https://youtu.be/qm0IfG1GyZU?t=184
RAM(重复、自动、最小值(
.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/)