多列布局通常分成3种:第一种是每列都是固定宽度的;第二种其中1列是自适应宽度,剩余列是固定宽度;第三种是每都是百分比宽度。现在主要来说一下第三种。我们现在有个需求是页面平均分成左右2个部分。
http://matthewjamestaylor.com/blog/perfect-2-column-double-page.htm
已经有了一个解决方案。但是我觉得他的html结构和css还是太复杂了,并且使用position:relative以及float等属性,这些属性在
ie6下会导致影响它们的父元素以及子元素的表现。比如relative的元素在ie6下一定要把他的每层上级父元素都设置为relative,就像感染
了病毒一样。
接下来就说说我的方案吧。我这里是主要是使用了display:inline-block的布局。
<style>
.u {
display: inline-block;
zoom: 1; *display: inline; /* IE < 8: fake inline-block */
}
.u-1-2 {
width: 50%;
}
#content_a {
height: 100px;
background-color: #336699;
}
#content_b {
height: 50px;
background-color: #339966;
}
</style>
<div>
<div id="d1" class="u u-1-2">
<div id="content_a">
</div>
</div>
<div id="d2" class="u u-1-2">
<div id="content_b">
</div>
</div>
</div>
classname:u 定义了inline-block,classname:u-1-2定义了50%的宽度。所以d1和d2两个元素合在一起是50%,应该就是并排在一起的2个div了。
但是实际上呢?2个元素还是垂直排列的。
为什么呢?注意看dom结构里面d1和d2之间其实是有空白字符的,有换行符和tab缩进。所以浏览器在解析的时候也计算了这些字符的宽度。所以d1、d2再加上这些宽度总宽度就超过了100%所以导致了换行。所以接下来我们就把空白字符去掉。我使用了注释来保留缩进,这样比较容易排列。
<div>
<div id="d1" class="u u-1-2">
<div id="content_a">
</div>
</div><!-- 避免空白元素
--><div id="d2" class="u u-1-2">
<div id="content_b">
</div>
</div>
</div>
这样,我们在firefox上就得到了想要的效果。
这样做已经能够在ie8,firefox,safari,chrome下显示正常了。但是在ie6和ie7下还是会换行。
经过不断的尝试,发现只要把width:50%改成width:49.999999%就能在ie6和ie7下面实现效果。然后再美化一下让d1和d2垂直居上对齐,这个效果就完成了。
最后的代码如下:
<style>
.u {
display: inline-block;
zoom: 1; *display: inline; /* IE < 8: fake inline-block */
vertical-align: top;
}
.u-1-2 {
width: 49.9999999%;
}
#content_a {
height: 100px;
background-color: #336699;
}
#content_b {
height: 50px;
background-color: #339966;
}
</style>
<div>
<div id="d1" class="u u-1-2">
<div id="content_a">
</div>
</div><!-- 避免空白元素
--><div id="d2" class="u u-1-2">
<div id="content_b">
</div>
</div>
</div>
效果如下:
- 大小: 17.9 KB
- 大小: 17.5 KB
- 大小: 16 KB
分享到:
相关推荐
表格和框架是用于创建多列布局的主要工具。虽然他们能完成工作(但其实非常糟糕)。 把目光投向今天。HTML和CSS已经变得非常复杂,Web设计的知名度和复杂度与日俱增。我们曾经使用的旧的布局方法显然已经out了。然而...
在基于像素和百分比的布局之间切换; 响应式和固定布局,在您的标记中没有任何不语义的 .grid_x 类。 查看示例页面。 #Differences 最显着的区别是 Flawless-Semantics 使用列 - 装订线 - 装订线方法而不是装订...
响应式和通用应用程序的React Native库 ... 它避开了基于Flexbox的复杂大小限制,转而使用了基于百分比的简单大小限制。 并且在使用基于Flexbox的垂直和水平对齐约束时会这样做。 一列可以包含一个或多个行,每
并可轻松调节以满足设计要求基于百分比的布局网格系统的柔性排水沟捆绑调试功能轻松的系统在列之间切换顺序物品的垂直对齐物品的水平对齐嵌套布局装订边距,填充和宽度帮助器捆绑的彩色调色板,用于文本和背景,高度...
列表之首列固定的列表 日历类 日历(Calendar)之Calendar Picker 日历(Calendar)之TimesSquare 日历之CalendarView 日历控件 日历之封装的My97DatePicker日历 社交类 社交分享-SinaWeibo Share 社交分享类》》...
很多网页都是基于网格设计的,这说明网页是按列来布局的。 使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。 响应式网格视图通常是 12 列,宽度为100%,在浏览器窗口大小调整时会自动伸缩。 ...
+12列自适应百分比网格(栅格)系统,适应各种分辨率和平台 +纯CSS开发框架,基于HTML5+CSS3 +完美兼容个版本的Designers Site Program 全站静态系统 +无任何的Javascript效果代码参与到框架开发中,极大程度方便您...
12列自适应百分比网格(栅格)系统,适应各种分辨率和平台 纯CSS开发框架,基于HTML5 CSS3 完美兼容个版本的Designers Site Program 全站静态系统 无任何的Javascript效果代码参与到框架开发中 模块...
启动DataGrid多列排序 6.4节. 过滤DataGrid数据项 6.5节. 为AdvancedDataGrid创建自定义表头 6.6节. 处理DataGrid/AdvancedDataGrid相关事件 6.7节.AdvancedDataGrid数据项选择 6.8节. 启动DataGrid拖拽功能 6.9节....
:移动使用的响应式和流畅结构(列基于屏幕宽度的百分比,并在较小的设备上垂直堆叠) Javascript :动态创建表格行以显示结果 Jquery :数据验证以确保干净的用户输入 Git :版本控制系统 GitHub : git 存储库的源...
3.2 理解基于日期的坐标轴与基于类别的坐标轴 65 3.2.1 将文本日期转换为日期 66 3.2.2 不被识别为日期的日期:数字年份 71 3.2.3 不被识别为日期的日期:1900年之前的日期 72 3.2.4 使用其他方法显示使用...
3.2 理解基于日期的坐标轴与基于类别的坐标轴 65 3.2.1 将文本日期转换为日期 66 3.2.2 不被识别为日期的日期:数字年份 71 3.2.3 不被识别为日期的日期:1900年之前的日期 72 3.2.4 使用其他方法显示使用...
3.2 理解基于日期的坐标轴与基于类别的坐标轴 65 3.2.1 将文本日期转换为日期 66 3.2.2 不被识别为日期的日期:数字年份 71 3.2.3 不被识别为日期的日期:1900年之前的日期 72 3.2.4 使用其他方法显示使用...
3.2 理解基于日期的坐标轴与基于类别的坐标轴 65 3.2.1 将文本日期转换为日期 66 3.2.2 不被识别为日期的日期:数字年份 71 3.2.3 不被识别为日期的日期:1900年之前的日期 72 3.2.4 使用其他方法显示使用...
3.2 理解基于日期的坐标轴与基于类别的坐标轴 65 3.2.1 将文本日期转换为日期 66 3.2.2 不被识别为日期的日期:数字年份 71 3.2.3 不被识别为日期的日期:1900年之前的日期 72 3.2.4 使用其他方法显示使用...
3.2 理解基于日期的坐标轴与基于类别的坐标轴 65 3.2.1 将文本日期转换为日期 66 3.2.2 不被识别为日期的日期:数字年份 71 3.2.3 不被识别为日期的日期:1900年之前的日期 72 3.2.4 使用其他方法显示使用...
书中实例来源于多位工程师的多年积累,具有很强的实用性。 本书是第II卷,以开发人员在项目开发中经常遇到的问题和必须掌握的技术为中心,介绍了应用Java进行桌面程序开发各个方面的知识和技巧,主要包括Java语法与...