css布局总结

来源：互联网发布：js 选中input文本编辑：程序博客网时间：2024/05/16 05:10

三栏式布局任务要求是完成如下图所示布局：
这里写图片描述

有两种方案可实现任务要求的效果：

1、利用float实现浮动布局

首先需要定义父元素的宽高，不定义也可以，不过这样会影响同级兄弟元素的布局，建议定义父元素宽高。

.container{    margin: 2%;    height: 500px;    border: 1.5px solid rgba(37, 74, 86, 0.68);}

对每个子元素加上float: left;保证所有子元素浮动布局，并脱离文档流。

.container__left{    float: left;    width: 200px;    height: 200px;    margin:20px;}.container__content{    float: left;    height: 450px;    width: calc(100% - 440px) ;    margin-top: 20px;}.container__right{    float: right;    width: 160px;    height: 450px;    margin: 20px;}

值得注意的是，如何让中间内容区域实现自适应宽度，这里运用了width: calc(100% - 440px) 语句，440px是左右两边局域宽度和与中间局域间距的总和，这样就可以实现定宽自适应布局。

2、利用position定位实现布局

首先对父元素设置position: relative，作为绝对定位的参考物，然后在子元素中设置position: absolute。

.container{    position: relative;    margin: 2%;    height: 500px;    border: 1.5px solid rgba(37, 74, 86, 0.68);}.container__left{    position: absolute;    left: 20px;    top:20px;    width: 200px;    height: 200px;}.container__content{    position: absolute;    left: 240px;    top:20px;    height: 400px;    width: calc(100% - 440px) ;}.container__right{    position: absolute;    right: 20px;    top:20px;    width: 160px;    height: 400px;}

这种设计方法如同PS中画布和图层之间的关系，每个图层就像玻璃板一样一层一层叠加在画布上，这种利用position定位实现布局的方法经常用在轮播图和文字叠在图片上方的场景中。
优劣比较：
方法1只需在子元素上设置float即可，但有时需要清除浮动，且兼容性较差；
方法2需在父元素和子元素中设置position: relative和position: absolute，但层级结构单一，兼容性较好，适合整体布局。

完整代码如下图所示：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>My Team</title>    <link rel="stylesheet" href="./css/base.css">    <link rel="stylesheet" href="./css/test1-3.css"></head><body>    <div class="container">        <div class="container__left">            <img src="./images/findlab.PNG" class="container__left__logo">            <div class="container__left__title">FIND--findlab</div>        </div>        <div class="container__content">            <h2 class="container__content__title"><abbr title="future information network&Data">FIND</abbr> --findlab 实验室</h2>            <p class="container__content__text">finlab实验室成立于2009年，坐落在广东工业大学工学2号馆404，是一所环境优美，文化浓厚，面向世界和未来的智能科技实验室。</p>            <p class="container__content__text">实验室设立4个独立小组，分别为公交组、大数据组、机器人组以及区块链组。公交组业务范围涉及公交wifi平台搭建、软件技术攻关以及运营维护等，目前已与多家客运公司合作，在花都至龙岗等线路的客运车上安置客运云盒，让用户在旅途中享受娱乐资讯、免费wifi等服务，上市以后受到广泛好评。大数据组主要负责学习和专研各种可行算法，在实际问题中寻找可行的方案，组内成员多次参加各类平台比赛，并取得优异成绩。机器人组面向人工智能，目前做过的实验有机械手动作模拟，语音交互，视觉捕获等工作，先与企业合作，提供语音交互技术攻关。区块链组是2017年成立的小组，属于雏形期，由于最近网络安全，区块链技术的兴起，使得我们有展开深入探讨的必要性。虽然4个小组相互独立，但有可相互交叉合作，共同进步。</p>            <p class="container__content__text">未来是不可预知的，是瞬息万变的，我们面向未来，追赶未来，但不畏惧未来。findlab实验室总是与时俱进，在科技不断发展的前沿中学习挖掘可用价值，比如新成立的区块链小组。我们坚信未来一定是属于我们的。 </p>        </div>        <div class="container__right">            <img src="./images/公交wifi.jpg" class="container__right__img">            <img src="./images/大数据.jpg" class="container__right__img">            <img src="./images/人工智能.jpg" class="container__right__img">            <img src="./images/区块链.jpg" class="container__right__img">        </div>    </div></body></html>

.container__left,.container__content,.container__right{    border: 1px solid rgba(147, 147, 81, 0.68);}.container{    position: relative;    margin: 2%;    height: 500px;    border: 1.5px solid rgba(37, 74, 86, 0.68);}.container__left{    position: absolute;    left: 20px;    top:20px;    width: 200px;    height: 200px;}.container__left__logo{    display: block;    margin: 10% auto ;    width: 50%;    height: 50%;}.container__left__title{    text-align: center;    font-size: 24px;}.container__content{    position: absolute;    left: 240px;    top:20px;    height: 460px;    width: calc(100% - 440px) ;}.container__content__title{    margin-left: 20px;    font-size: 24px;    color: #333333;}.container__content__text{    margin:0 20px 14px;    line-height: 24px;}.container__right{    position: absolute;    right: 20px;    top:20px;    width: 160px;    height: 460px;}.container__right__img{    display: block;    width: 100px;    height: 100px;    margin: 10px 30px;}

这里写图片描述

阅读全文

0 0