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中实现两列布局的更多相关文章

  1. CSS读书笔记(1)---选择器和两列布局

    (1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...

  2. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  3. bootstrap的栅格布局与两列布局结合使用

    在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...

  4. css布局之两列布局

    我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度 1.自适应两列布局 <!DOCTYPE html> <html lang="en"&g ...

  5. DIV+CSS 网页布局之:两列布局

    1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以 ...

  6. css两列布局之基于BFC规则实现

    css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...

  7. 盒子模型、网页自动居中、float浮动与清除、横向两列布局

    1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...

  8. css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  9. CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

    最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化  个人总结出如下三种实现思路: 通过绝对定位实现 S ...

随机推荐

  1. php memcache分布式和要注意的问题

    Memcache的分布式介绍 memcached虽然称为“分布式”缓存服务器,但服务器端并没有“分布式”功能.服务器端仅包括内存存储功能,其实现非常简单.至于memcached的分布式,则是完全由客户 ...

  2. @PostConstruct与@PreDestroy讲解及实例

    关于在spring  容器初始化 bean 和销毁前所做的操作定义方式有三种: 第一种:通过@PostConstruct 和 @PreDestroy 方法 实现初始化后和销毁bean之前进行的操作 第 ...

  3. leetcode 121. Best Time to Buy and Sell Stock 、122.Best Time to Buy and Sell Stock II 、309. Best Time to Buy and Sell Stock with Cooldown

    121. Best Time to Buy and Sell Stock 题目的要求是只买卖一次,买的价格越低,卖的价格越高,肯定收益就越大 遍历整个数组,维护一个当前位置之前最低的买入价格,然后每次 ...

  4. Apollo GPS调试笔记

    前言:在Apollo美研团队的支持下,最近完成了Apollo推荐的Novatel PP7与我们的基站调试,在这里对Apollo的笔记做一个补充,希望以后的开发者不用在踩我们踩过的坑. 在自己调导航(h ...

  5. 百度Apollo安装说明

    前言:最近在和百度Apollo合作,Apollo的人很nice,大家都在全力帮助我们解决问题.但Apollo系统有点难搞,安装起来很费劲,为了避免再次踩坑,留下笔记,流传后人,O(∩_∩)O. 1. ...

  6. 将宿主主机上的目录挂载到Docker中

    docker run -it -v /home/zhouqun/文档/workplace:/var/www/html ubuntu64 /bin/bash 将宿主主机中/home/文档/workpla ...

  7. ASP.Net GridView 基础 Template模板

    一.了解Template AlternatingItemTemplate定义交替行的内容和外观,如果没有规定模板,则使用ItemTemplate:EditItemTemplate定义当前正在编辑的行的 ...

  8. eclipse删除的文件如何恢复。

    1.如果不小心删除了单个文件或者文件夹. 鼠标点击上级目录 Ctrl+z就可以恢复了. 如果没有恢复,就右击项目,选择Resore from Local History 然后选择你所删除的文件,选择恢 ...

  9. JavaScript小练习1-控制div属性

    题目 要实现的效果如图所示:查看演示 *** 分析 乍一看还以为十分简单,就是简单的点击button时触发的函数来改变样式值,不过做到后面就开始打脸了--"重置"功能.其实要实现重 ...

  10. P1015 回文数解题思路(非原创)

    测试 #include<bits/stdc++.h> using namespace std; int n,m,step; string nn; int len,nex; bool dfs ...