常见情况
在日常的例子中我们经常可以看到如下的布局方式:
分析
左右为两栏式布局,那么我们怎么实现他呢?前辈们也写了很多方法,下面我自己总结一下我自己一般会用到的方法:
首先老规矩,先放例子:
当我们不做任何处理的时候:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两栏布局</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 为了截图效果 */
.box {
width: 600px;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<img src="./img/song.jpg" alt="">
</div>
<div class="right">
<h3>宋茜</h3>
<p>宋茜(Victoria),1987年2月2日出生于山东省青岛市,中国内地女演员、歌手,亚洲多栖发展女艺人。2008年,宋茜作为演员、广告模特在亚洲地区正式开始演艺活动。2009年,担任女子流行演唱组合f(x)队长,以歌手身份正式出道。2012年,主演都市爱情剧《爱情闯进门》,并凭借该剧获得国剧盛典年度最佳新人女演员奖。2015年12月,主演都市励志剧《美丽的秘密》 。2020年1月23日,参加湖南卫视亲情观察成长节目《我家那闺女2》的录制 ;1月26日,宋茜与宋威龙合作主演的都市情感剧《下一站是幸福》在湖南卫视播出,饰演职场女强人贺繁星;宋茜出生在山东省青岛市,是家中独生女,父母都是普通工人;小时候因为家离着学校远,宋茜便住在外公外婆家,考虑到外公外婆年纪大了,宋茜在生活上学会了自理,并培养出独立的性格.</p>
</div>
</div>
</body>
</html>
效果图:
这个时候布局显然和上面的相差有点大,那么我们怎么实现图片这种两栏式效果呢?
解决办法
办法1: 浮动
像这样:
在<style></style>中加入
left {
width: 145px;
float: left;
}
此时的效果图为:
此时我们可以发现右边的文字依然会掉下来,这时我们可以通过以下几种方式解决:
- 给左边的盒子设置定高,调整高度实现两边相互不干扰
- 给右边的盒子设置overflow属性值为hidden,实现左边定宽右边自适应的效果
.left {
width: 145px;
float: left;
/* 第一种 */
height: 258px;
}
/* 第二种 */
.right {
overflow: hidden;
}
两种效果图都为:
左边浮动起来,现实中还有一些与右边盒子存在一定的距离,可以给左边盒子加margin以实际效果。
同理,对于三栏布局,两侧固定,中间自适应的情况,可以左边左定位,右边右定位,中间margin左右自适应,但是需要注意的是先写左浮动,在写右浮动,最后在写常规流布局(具体情况需要看实际情况来定)。
办法2:使用定位
我们将左边盒子定位,右边部分设置margin-left部分给左边留空间,然后把左边盒子的z-index值设置的稍微大一些让她显示。
如下
<style>
* {
margin: 0;
padding: 0;
}
/* 为了截图效果 */
.box {
width: 600px;
margin: auto;
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
left: 145px;
}
.right {
margin-left: 145px;
}
</style>
此时的效果图为
也能实现上述的效果。
总结
在实际工作中我们会用到很多不同的办法,除了上面我所说的浮动、定位,我们常常还会用到弹性盒子等办法,每种办法都有自己的优点和方便之处,大家可以择优选择!