我已经创建了一个页面来显示网格,但是CSS网格显示为堆叠在桌面视图中。我不知道为什么会这样。这是代码:
CSS
我还添加了<div class="row">
,以表明它们是同一行的一部分。我尝试将其分为4列,然后使用span指示宽度。但是他们都不是
#grid-list-page {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1px;
}
.listUL {
padding: 2px;
margin: 1px;
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
.listUL li a {
text-decoration: none;
font-size: 1em;
padding: 0;
}
@media (max-width: 700px) {
#grid-list-page {
grid-template-columns: 1fr;
}
}
<div id="grid-list-page">
<div class="row">
<div class="grid-item">
<h4>List for USA</h4>
<ul id="usalistUL" class="listUL">
<?php
$args = array(
'post_type' => 'post',
'numberposts' => -1,
'meta_query' => array(
array(
'key' => 'list_country',
'value' => 'usa',
),
),
);
$usaposts = get_posts($args);
foreach($usaposts as $usapost) {
$post_id = $usapost->ID; ?>
<li>
<a href="<?php echo get_the_permalink($post_id); ?>"><?php echo get_the_title($post_id); ?></a>
</li>
<?php } ?>
</ul>
</div>
<div class="grid-item">
<h4>List for Canada</h4>
<ul id="canlistUL" class="listUL">
<?php
$args = array(
'post_type' => 'post',
'numberposts' => -1,
'meta_query' => array(
array(
'key' => 'list_country',
'value' => 'canada',
),
),
);
$canposts = get_posts($args);
foreach($canposts as $canpost) {
$post_id = $canpost->ID; ?>
<li>
<a href="<?php echo get_the_permalink($post_id); ?>"><?php echo get_the_title($post_id); ?></a>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
由于某种原因而工作。我在另一页上有一个网格,该网格使用相同的结构可以正常工作,但是此页面无法正常工作。任何指导都会有所帮助。预先感谢。
答案 0 :(得分:0)
我删除了<div class="row> </div>
,它似乎可以正常工作。这是html代码:
<div id="grid-list-page">
<div class="grid-item">
<h4>List for USA</h4>
<ul id="usalistUL" class="listUL">
<?php
$args = array(
'post_type' => 'post',
'numberposts' => -1,
'meta_query' => array(
array(
'key' => 'list_country',
'value' => 'usa',
),
),
);
$usaposts = get_posts($args);
foreach($usaposts as $usapost) {
$post_id = $usapost->ID; ?>
<li>
<a href="<?php echo get_the_permalink($post_id); ?>"><?php echo get_the_title($post_id); ?></a>
</li>
<?php } ?>
</ul>
</div>
<div class="grid-item">
<h4>List for Canada</h4>
<ul id="canlistUL" class="listUL">
<?php
$args = array(
'post_type' => 'post',
'numberposts' => -1,
'meta_query' => array(
array(
'key' => 'list_country',
'value' => 'canada',
),
),
);
$canposts = get_posts($args);
foreach($canposts as $canpost) {
$post_id = $canpost->ID; ?>
<li>
<a href="<?php echo get_the_permalink($post_id); ?>"><?php echo get_the_title($post_id); ?></a>
</li>
<?php } ?>
</ul>
</div>
这是css网格属性的另一个示例:https://www.w3schools.com/cssref/pr_grid-column.asp