在自适应布局之table实现一文中,我们初步了解了如何用Table实现自适应宽度的分栏布局。 但由于Table的死板布局约束和一些性能原因,我们通常不会采用基于Table的自适应布局。本文便来介绍一种常用的基于div浮动的分栏布局。 先看效果:
HTML框架
相比于Table布局,基于CSS的布局HTML代码会更加简洁:
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
首先通过doctype
指令让浏览器以HTML5标准来解析该文件,然后在<body>
中添加一个容器,他有左右两个子容器构成。 语义上很直观吧!
CSS
基于div浮动的分栏布局的思路是:设置其中一个子容器的float
让它脱离文档流,然后另一个正常放置。为了让后一个子容器内可以正常解析父容器宽度,通常会设置后一个容器的左外边距。
.left{
float: left;
width: 200px;
background-color: lightyellow;
}
.right{
margin-left: 200px;
background-color: lightblue;
}
为了让页面更加清晰,再来一点辅助样式:
.container{
margin: 10px;
border: 1px solid grey;
}
.left, .right{
height: 300px;
}
至此我们已经完成了基于div浮动的分栏布局。
溢出与滚动
用CSS创建任何容器时,都会面临着容器溢出的问题:如果它的内容太长或者太高容器应当作何反应?上述的分栏布局也存在这样的问题。
比起table布局,浮动布局中容器溢出的问题更加严重。
<table>
有着非常严(si)格(ban)的布局行为,它不允许两个<td>
遮挡、重合、或者任何形式的相互影响(对当前<tr>
的作用除外)。
为了让这个问题凸显出来,我们写这样一些HTML代码:
<body>
<div class="container">
<div class="left">
<p>class aptent <br/>taciti<br/> sociosqu <br/>ad<br/> litora <br/>torquent<br/> per <br/>conubia<br/> nostra<br/>,<br/> per<br/> inceptos <br/>taciti<br/> sociosqu<br/> himenaeos<br/>. suspendisse<br/> potenti<br/>. quisque<br/> augue metus<br/>, hendrerit<br/> sit amet<br/>, commodo<br/> vel,<br/> scelerisque ut<br/>, ante<br/>. praesent<br/> euismod euismod<br/> risus.<br/> mauris ut<br/> metus sit<br/> amet mi<br/> cursus commodo<br/>. morbi<br/></p>
</div>
<div class="right">
Vestibulumsuscipitenimacnulla.Prointincidunt.Proinsagittis.Curabiturauctormetusnonmauris.Nunccondimentumnislnonaugue.Donecleourna,dignissimvitae,porttitorut,iaculissitamet,sem.
</div>
</div>
</body>
然后页面就变成这样了:
左侧栏发生了垂直方向的高度溢出,而右侧栏发生了水平方向的行溢出。HTML的流式布局行为与排版软件及其相似,对于行溢出的情况应当设置断字属性; 对于高度溢出则应当设置一个滚动条。
.left{
overflow-y: auto;
}
.right{
word-break: break-word;
}
现在页面正常了!
版权声明本文由Harttle创作,转载需署名作者且注明文章出处
<!DOCTYPE html>
<html>
<head>
<style>
.left{
float: left;
width: 200px;
background-color: lightyellow;
overflow-y: auto;
}
.right{
margin-left: 200px;
background-color: lightblue;
word-break: break-word;
}
.container{
margin: 10px;
border: 1px solid grey;
}
.left, .right{
height: 300px;
}
.clsTeenyWeeny { zoom: 0.10 }
</style>
</head>
<body>
<div class="container">
<div class="left">
<p>class aptent <br/>taciti<br/> sociosqu <br/>ad<br/> litora <br/>torquent<br/> per <br/>conubia<br/> nostra<br/>,<br/> per<br/> inceptos <br/>taciti<br/> sociosqu<br/> himenaeos<br/>. suspendisse<br/> potenti<br/>. quisque<br/> augue metus<br/>, hendrerit<br/> sit amet<br/>, commodo<br/> vel,<br/> scelerisque ut<br/>, ante<br/>. praesent<br/> euismod euismod<br/> risus.<br/> mauris ut<br/> metus sit<br/> amet mi<br/> cursus commodo<br/>. morbi<br/></p>
</div>
<div class="right">
Vestibulumsuscipitenimacnulla.Prointincidunt.Proinsagittis.Curabiturauctormetusnonmauris.Nunccondimentumnislnonaugue.Donecleourna,dignissimvitae,porttitorut,iaculissitamet,sem.
</div>
</div>
<P onmouseover="this.style.zoom='200%'" onmouseout="this.style.zoom='normal'">
</body>
</html>
https://www.tianmaying.com/tutorial/css-line-wrap
相关推荐
主要介绍了css 两边固定中间自适应布局的实现,介绍了四种常用方法以及原理:浮动、浮动内嵌 div、定位、flex。具有一定的参考价值,感兴趣的小伙伴们可以参考一下
HTML实现2列布局,左侧宽度固定,右侧自适应 实现一: <style> body, html{padding:0; margin:0;} // 根据CSS定位,利用浮动或绝对定位,使左侧的块元素脱离常规文档流,可以与右边块元素并列 div:nth-of-...
DIV+CSS 网页布局第二篇:两列布局 1、宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了。 当元素使用了浮动之后,会对周围的元素造成影响,那么就...
本文介绍了详解左右宽度固定中间自适应html布局解决方案,分享给大家,具体如下: a.使用浮动布局 html结构如下 <div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>...
2、自适应(弹性)宽度CSS版式布局 3、标准布局常见问题及解决办法 像素问题及解决办法 上边容器浮动后,下边的容器跟着浮动,造成页面错乱 当子元素浮动且未知高度时,怎么使父容器适应子元素的高度? 相对定位与...
两列定宽加一列自适应布局 本布局模式一共分为三列,其中两列宽度固定,一列宽度随内容宽度而改变。简易实现代码如下: 两列定宽加一列自适应 本案例中每一列高度为自适应,即高度和内容高度一致,左列和中列宽度为...
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...
包括上中下一栏式、左右两栏式、左右两栏式之纯浮动实现、左右两栏式之绝对定位实现、左右两栏加页眉页脚、左中右三栏之左右浮动实现、左中右三栏之双飞翼实现(多一个div)、左中右三栏加页眉页脚。
多列式CSS页面布局的实现; ?应用“反向浮动”将主要内容置于文档前面部分; ?应用无序列表ul构建水平横向菜单; ?应用无序列表ul制作多种菜单元素; ?标题标签h1-h4在页面中的使用; ?定义列表dl的应用实例及...
而我们通常布局,肯定不会用行内元素,所以会选择,绝对定位或浮动。 2.居中:这里我们应该会想到1/2、50%、一半等这些东西。 上图中:黑色为body,深绿色需要在body中水平居中,并且宽度是自适应的。亮绿色,是...
双飞翼布局和圣杯布局都是实现两边固定中间自适应的三栏布局的方式,最近在整理三栏布局实现方式的笔记,决定但拉出来一篇,记一下这两个经典布局。 1、圣杯布局 浮动、负边距、相对定位、不添加额外标签 效果图 ...
),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国... [显示全部] 《CSS网站布局实录:基于Web标准的网站设计指南...
4.jquery+div实现同时滑动切换的图文展示特效插件下载 5.jquery+div带动画按钮图片手动与自动切换的特效代码 6.jquery一页多用的飞飞图片幻灯插件演示 7.jquery仿flash产品图片多角度展示特效代码 8.jquery...
在传统表格式布局中,之所以能够进行页面的排版布局设计,完全依赖于表格对象table。如今,接触另一种布局方式——CSS布局。div正是这种布局方式的核心对象。仅从div的使用上说,做一个简单的布局只需要依赖两样东西...
易修改,举个最简单的例子,比如要求修改一个div的高宽且保持其子div自适应高宽,若是写死了子div的高宽,修改工作很麻烦,所以最好是将子div在需求下尽可能写成自适应,这样修改时就只需要修改父div的高宽即可。...
div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...
并讲解了完整的解决方法,主要包括各种导航菜单(水平的、竖直的、固定宽度的、自适应宽度的、下拉的等),Tab面板、伸缩面板和折叠面板,以及各种形式的分列布局(固定宽度的、变化宽度的、固定宽度与变化宽度结合...
9.3.2 div+CSS布局的缺点 201 9.3.3 何时使用TABLE 202 9.4 一列布局 203 9.4.1 一列固定宽度 203 9.4.2 一列宽度自适应 204 9.4.3 一列宽度居中 205 9.5 二列布局 206 9.5.1 二列固定宽度 206 9.5.2 二列宽度自适应...
圣杯布局源自 Matthew Levine 在06年的一篇...流程解说接下来,让我们一步一步地实现圣杯布局; 1、 首先分别浮动main、sub、extra三列, 然后利用负外边距把sub列和extra列定位到左右两边。这时的CSS代码如下: CSS
掌握CSS学习CSS3,Web布局,自适应Web设计,SASS,LESS,Flexbox,CSS网格布局和Bootstrap 4。 持续时间:+ 20小时课程记录第1天:2020年11月22日,HTML5:简介创建一个简单的网页。 CSS的第一步选择器,字体,颜色...