Drupal views中实现两列布局
Views中的format有table,grid,unformatted list等,但是没有2 columns等选项。
如果要达到如下效果:

左侧一列有title,content,右侧一列image。各占50%。
我们可以安装views_fieldset模块
安装此模块后可添加"Global: Fieldset"字段。
我们在views中添加两个Global:fielset。
在配置页面title分别命名fieldset-left和fieldset-right。
html classes分别命名content-left和content-right。
Display type选择"<div>"
排列如下:

效果如下:

这样views每一项的html结构就会类似:
<div class="left-content">
<div class="views-title"></div>
<div class="views-body"></div>
</div>
<div class="right-content">
<div class="views-image"></div>
</div>
最后在CSS中调整样式:
.left-content {
float:left;
width:50%;
}
.right-content {
float:right;
width:50%;
}
Drupal views中实现两列布局的更多相关文章
- CSS读书笔记(1)---选择器和两列布局
(1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...
- css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
- bootstrap的栅格布局与两列布局结合使用
在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...
- css布局之两列布局
我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度 1.自适应两列布局 <!DOCTYPE html> <html lang="en"&g ...
- DIV+CSS 网页布局之:两列布局
1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以 ...
- css两列布局之基于BFC规则实现
css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...
- 盒子模型、网页自动居中、float浮动与清除、横向两列布局
1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...
- css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化 个人总结出如下三种实现思路: 通过绝对定位实现 S ...
随机推荐
- 2018.09.15模拟总结(T1,T3)
过了一周,终于迎来了第二次模拟(这不是期待的语气),看第一周毒瘤程度,我就觉得接下来的模拟只能更毒瘤. 花了10多分钟读完了三道题,觉得暴力还是挺好写的,然后在每一道题都思索那么几分钟后,觉得还是写暴 ...
- Sublime Text 3中设置不记住上次打开的文件
转自:https://blog.csdn.net/nicholaszao/article/details/79575251 在”User/Preferences.sublime-settings”配置 ...
- [转]MBTiles 1.2 规范翻译
MBTiles 1.2 可以参考超图的文档MBTiles扩展具体实现可以参考浅谈利用SQLite存储离散瓦片的思路和实现方法 mapbox提供了一个简单实现测试代码,github地址在这里https: ...
- nRF5 SDK for Mesh( 七 ) BLE MESH 的 架构(rchitecture)
The mesh architecture The mesh stack consists of a number of subsystems that are interfaced throug ...
- nRF5 SDK for Mesh(一) 介绍和下载源码
一: 官网介绍地址:http://www.nordicsemi.com/Products/Bluetooth-low-energy/nRF5-SDK-for-Mesh Nordic offers a ...
- DataGuard相关视图
1.v$database SELECT name,open_mode,database_role,protection_mode,protection_level FROM v$database; 其 ...
- 洛谷P4602 [CTSC2018]混合果汁(主席树)
题目描述 小 R 热衷于做黑暗料理,尤其是混合果汁. 商店里有 nn 种果汁,编号为 0,1,\cdots,n-10,1,⋯,n−1 . ii 号果汁的美味度是 d_idi ,每升价格为 p_ipi ...
- Redis高可用详解:持久化技术及方案选择 (推荐)--转载自编程迷思博客www.cnblogs.com/kismetv/p/8654978.html
一.Redis高可用概述 在介绍Redis高可用之前,先说明一下在Redis的语境中高可用的含义. 我们知道,在web服务器中,高可用是指服务器可以正常访问的时间,衡量的标准是在多长时间内可以提供正常 ...
- [转]windows下多个python版本共存,pip使用
windows下多个python版本共存,pip使用 2017年09月13日 17:21:30 阅读数:2574 一.同时装了Python3和Python2,怎么区分 了解python的人都知道pyt ...
- 在全志V3/V3s和索智S3/S3L上调试32MB NorFlash
选取MX25L25635F作为调试对象,其他型号的NorFlash开发调试原理基本一致.为了使V3/V3s/S3/S3L识别32MB NorFlash并正常工作,主要针对以下三个部分进行开发和调试.下 ...