常规的布局方式之两栏布局--左边定宽，右边自适应

最新推荐文章于 2022-07-12 10:50:49 发布

Yannnnnm

最新推荐文章于 2022-07-12 10:50:49 发布

阅读量759

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/Yannnnnm/article/details/107471498

版权

两栏布局

常见情况

在日常的例子中我们经常可以看到如下的布局方式:
songqian

分析

左右为两栏式布局，那么我们怎么实现他呢？前辈们也写了很多方法，下面我自己总结一下我自己一般会用到的方法：
首先老规矩，先放例子：
当我们不做任何处理的时候：

<!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;
  }

两种效果图都为：
xioaguotu
左边浮动起来，现实中还有一些与右边盒子存在一定的距离，可以给左边盒子加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>

此时的效果图为

也能实现上述的效果。

总结

在实际工作中我们会用到很多不同的办法，除了上面我所说的浮动、定位，我们常常还会用到弹性盒子等办法，每种办法都有自己的优点和方便之处，大家可以择优选择！

Yannnnnm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常规的布局方式之两栏布局--左边定宽，右边自适应

在日常的例子中我们经常可以看到如下的布局方式:左右为两栏式布局，那么我们怎么实现他呢？前辈们也写了很多方法，下面我自己总结一下我自己一般会用到的方法：首先老规矩，先放例子：当我们不做任何处理的时候：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini
复制链接

扫一扫