首页 > 快速免费建站 > drupal > Drupal9输出多行多列内容时可借助flex快速排版

Drupal9输出多行多列内容时可借助flex快速排版

使用drupal9视图打印一行多列、多行多列的内容时,往往会因素模板覆写的不够彻底、不够干净,导致模板中多出一个块状元素的标签,进而影响静态页已经实现的功能。具体表现为,一行多列或者多行多列的效果,变成了多行的效果。
解决的办法有两个,一是通过模板覆写,把用drupal9输出的内容代码,覆写的与静态页代码一样即可;二是通过flex布局,重新设置对应样式。如下所示:
需求1:一行多列的两端对齐
<body>
<style type="text/css">
   .father{border: 1px solid #000; display: flex;justify-content: space-between;justify-content: space-around;}
</style>
<div class="father">
    <div>栏目1</div>
    <div>栏目1</div>
    <div>栏目1</div>
    <div>栏目1</div>
</div>
</div>
</div>
</div>
</body>
实现这个效果,只需要在父标签定义样式即可,一是使用display: flex;声明父标签为弹性布局;二是使用justify-content: space-between;justify-content: space-around;让父标签内的块状元分散对齐,或者两端对齐。
 
需求2:多行多列且每行指定列的两端对齐
 
<body>
<style type="text/css">
   .father{border: 1px solid #000; display: flex;flex-wrap: wrap;}
    .father div{flex: 0 0 33%;}
</style>
<div class="father">
    <div>栏目1</div>
    <div>栏目1</div>
    <div>栏目1</div>
    <div>栏目1</div>
</div>
</div>
</div>
</div>
</body>
实现这个樈,需要同时设置父标签与子标签的样式,一是在父标签中声明弹性布局,并让父标签的子元素超出时自动换行;二是在子标签中规定每个元素所占比例,如果每个4个元素,则比例为25%;如果每行5个元素,则比例设置为20%,依次类推。
一般来说,出现上述情况,首先考虑模板覆写解决样式问题,如果解决不了,再考虑flex弹性布局来解决。

相关推荐