多列中相同垂直位置的图像

时间:2019-09-30 作者:Mlha

我在一个页面中有一个多列布局(在我的例子中是5列,但这并不重要)。在每一列中,我都有一个标题,然后是一个图像,然后是一些文本,如下所示: Heading 1 Heading2 Image 1 Image2 Text 1 Text2

然而,标题太长,无法放在一行中,因此有时必须将标题分成两行甚至三行。由于标题不同,这实际上会导致图像处于不同的垂直位置。我希望所有的图片都在同一个垂直位置上-基本上在所有的列上都成一行。

唯一的想法是使用两个“列”块,一个用于标题,另一个用于图像和文本。然而,这在移动设备上并不能真正起作用,因为我希望它是这样的:Heading 1 Image 1 Text 1 Heading 2 Image 2 Text 2

如果有两个单独的列布局,则会先打印两个标题,然后再打印其余内容。

我愿意使用手写CSS或JS,但我不知道如何。。。我的主题是GeneratePress,如果这有用的话。

1 个回复
SO网友:Dallas Price

这更像是一个html问题,但您必须编写一个主题,或者至少是一个子主题。

要做到这一点,一个绝对可怕的方法是使用桌子。。。但是,这可能是最简单的方法。这样就足够了:

<div class="row">title 1, title 2</div>
<div class="row">image 1, image 2</div>

相关推荐

是否仅在需要供应商JS/CSS的页面上注册它们?

我有一些JS\\CSS,用于我网站上的选定页面中的各种UI功能,例如图像滑块。此图像滑块仅在站点内的几个页面上使用,在每个请求上加载它都会影响性能。是否有在需要时选择性加载这些类型的供应商有效载荷的最佳实践?function wpdocs_dequeue_script() { if( ! is_page(\'gallery\') ) { wp_dequeue_script( \'vendor-slider\' ); } }&#