首页 > 快速免费建站 > drupal >

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弹性布局来解决。
标签：

相关推荐

猜您喜欢