`

jQuery+CSS让两栏或多栏布局高度自动一致

阅读更多


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+CSS让两栏或多栏布局高度自动一致</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
	$(function(){
		var m = Math.max(
	    $('.main').height(),
	    $('.sidebar').height(),
	    $('.sidebar2').height()
		);
		alert(m);
		$('.content').height(m);		   
	});
</script>
<style type="text/css">
div {
	background-color: #eee;
	display: block;
	float: left;
	margin-right: 10px;
	padding: 10px;
	width: 150px;
}
</style>
</head>
<body>
	<div class="content main"> box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 </div>
	<div class="content sidebar">box02 box02 box02 box02 </div>
	<div class="content sidebar2">box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03  box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03  box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03</div>
</body>
</html>

 
 

  • 大小: 2.9 KB
分享到:
评论

相关推荐

    HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站

    1. 多列布局:column-count、column-gap等属性,实现多栏布局。 2. 选择器增强:伪类(如:hover、:active、:focus)和伪元素(如::before、::after)的扩展,更精确地控制样式。 3. 动画与过渡:transition和...

    DIV+CSS实现的框架,仿frameset,支持左侧缩进

    总的来说,这个项目提供了一种利用`DIV+CSS`替代`frameset`的解决方案,它既保留了多栏布局的功能,又避免了`frameset`的局限性,同时考虑到了老版本IE浏览器的兼容性问题。对于那些需要创建稳定、可维护且灵活布局...

    164精美网页模板(div+css)121-130

    Div元素通常用于创建复杂布局,如两栏、三栏或多栏布局,或者作为页面区块的划分。 2. CSS(Cascading Style Sheets):CSS是控制网页外观和布局的样式表语言。通过CSS,我们可以定义字体、颜色、间距、布局等视觉...

    H5全栈工程师-智游培训班 Html5+Css3第一阶段-个人零基础前端资料

    CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块

    css+div 经典问题

    3. 分割屏幕布局:利用div和CSS,可以轻松实现左右或上下分割的屏幕布局,适用于创建响应式的多栏界面。 三、jQuery语法在CSS+div中的应用 jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理和动画效果。...

    html5黑色大气的个人博客全屏滚动个人主页源码HTML+JS+CSS

    6. **多列布局(Multi-column Layout)**:column-count和column-gap等属性,方便创建多栏布局。 【JavaScript知识点】 1. **ECMAScript 5/6/7**:JavaScript的新版本引入了新的语法特性,如let、const、箭头函数、...

    行业分类-设备装置-多栏笔记本交互.zip

    "多栏笔记本交互"是一个专门探讨如何在设备或应用中实现多栏布局,以优化信息管理和任务处理的概念。多栏设计通常用于提高生产力,特别是在需要同时处理多个任务或者大量数据的情况下。 在多栏笔记本交互中,我们...

    《WEB前端框架开发技术》HTML5响应式旅游景区网站设计与实现——榆林子州HTML+CSS+JavaScript.md

    本项目采用了浮动布局,以实现多栏布局和元素的灵活排列。 ### 知识点四:JavaScript基本应用 - **JavaScript**:一种强大的客户端脚本语言,可以用来实现动态效果和交互功能。例如,通过JavaScript可以实现图片...

    三栏布局

    Bootstrap 提供了一套预定义的类,使得创建多栏布局变得更加简单。在Bootstrap中,可以使用 `col-*` 类来定义栏的宽度,例如 `col-md-4` 表示在中等屏幕设备上占据总列数的四分之一。以下是一个使用Bootstrap的三栏...

    jquery实现全屏多栏焦点图动态切换全屏广告特效源码.zip

    【标题】中的“jquery实现全屏多栏焦点图动态切换全屏广告特效源码”指的是一个使用jQuery库创建的Web页面元素,它主要用于构建一种视觉效果强烈的广告展示。这种效果通常应用于网站的首页或者产品展示区域,以吸引...

    jquery全屏多栏焦点图动态切换全屏广告代码.zip

    《jQuery全屏多栏焦点图动态切换全屏广告代码详解》 在网页设计中,吸引用户注意力、提升用户体验是至关重要的。全屏广告作为一种高效的信息传递方式,常常被用于展示品牌形象或者产品特色。jQuery库因其丰富的功能...

    jQuery实战之仿淘宝商城左侧导航效果

    在这个效果中,浮动被用于实现多栏布局,即左侧的导航栏和右侧的内容显示区。 文档中还提到,jQuery库文件在`script`标签中通过`src`属性引入,这里指定的是`jquery-1.4.2.min.js`,即jQuery的1.4.2版本的压缩文件...

    水疗按摩网站CSS3滑块模板是一款适合水疗休闲会所的CSS3网站模板。_html网站模板_网页源码移动端前端_H5模板.rar

    5. **多列布局(Multiple Columns)**:CSS3提供了多列布局模式,通过`column-count`、`column-gap`等属性,可以轻松创建报纸般的多栏布局,非常适合内容分隔和展示。 6. **响应式设计(Responsive Design)**:CSS...

    jquery做的类似报纸新闻

    标题中的“jquery做的类似报纸新闻”指的是使用JavaScript库jQuery创建的一种网页布局或交互效果,它模仿了传统报纸的排版风格,将大量的信息以多栏、分页或滚动的形式呈现,提升用户的阅读体验。这种设计通常包含...

    详解jQuery移动页面开发中的ui-grid网格布局使用

    这些类是基于CSS来设计的,能够快速地在网页上实现多栏布局效果。 两列布局使用ui-grid-a类,它的网格宽度为100%,并且在视觉上不显示边界和背景。同时,它没有外边距(margin)和内边距(padding),这样可以保证内部...

    深入学习js瀑布流布局

    它模拟自然界的瀑布形态,让图片或元素按照流水般自然排列,布局方式为等宽不等高,即每一列的宽度保持一致,但高度则根据内容自适应。 瀑布流布局的实现方式主要分为纯CSS实现和JavaScript结合CSS实现。纯CSS实现...

    表格分栏的jQuery封装

    通过jQuery,我们可以动态地将表格的每一行拆分为多栏,使得用户可以在有限的屏幕空间内查看更多的信息,无需滚动或缩放。 这个“表格分栏的jQuery封装”可能包含以下核心知识点: 1. **jQuery选择器**:jQuery...

Global site tag (gtag.js) - Google Analytics