正文 

当前位置： 首页 > java > java框架

css三列布局

云雀sunshine      2022-02-11     746

关键词：

　　前面已经介绍过单列定宽单列自适应和两列自适应的两列布局。本文介绍三列布局，分为两侧定宽中间自适应、两列定宽一侧自适应、中间定宽两侧自适应、一侧定宽两列自适应和三列自适应这五种情况

 

两侧定宽中间自适应

思路一:  float

【1】float + margin + calc

复制代码
<style>
p{margin: 0;}
.parent{overflow: hidden;}
.left,.right{float: left;width: 100px;}
.center{float: left; width:calc(100% - 240px);margin: 0 20px;}
</style>
复制代码
复制代码
<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>    
    <div class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </div>    
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
    </div>        
</div>
复制代码

【2】float + margin + (fix)

复制代码
<style>
p{margin: 0;}
.parent{overflow: hidden;}
.left,.right{position: relative;float: left;width: 100px;}
.centerWrap{float: left; width:100%; margin: 0 -100px;}
.center{margin: 0 120px;}
</style>
复制代码
复制代码
<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>            
    <div class="centerWrap" style="background-color: red;">
        <div class="center" style="background-color: pink;">
            <p>center</p>
            <p>center</p>
        </div>        
    </div>
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
    </div>            
</div>
复制代码

思路二: inline-block

【1】inline-block + margin + calc

复制代码
<style>
p{margin: 0;}
.parent{font-size: 0;}
.left,.right,.center{display:inline-block; vertical-align: top;font-size: 16px;}
.left,.right{width: 100px;}
.center{width: calc(100% - 240px); margin: 0 20px;}
</style>
复制代码
复制代码
<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>            
    <div class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </div>        
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
    </div>            
</div>
复制代码

【2】inline-block + margin + (fix)

复制代码
<style>
p{margin: 0;}
.parent{font-size: 0;}
.left,.right,.centerWrap{display:inline-block; vertical-align: top;font-size: 16px;}
.left,.right{width: 100px;position:relative;}
.centerWrap{width: 100%; margin: 0 -100px;}
.center{margin: 0 120px;}
</style>
复制代码
复制代码
<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>    
    <div class="centerWrap" style="background-color: orange;">
        <div class="center" style="background-color: pink;">
            <p>center</p>
            <p>center</p>
        </div>        
    </div>        
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
    </div>            
</div>
复制代码

思路三: table

复制代码
<style>
p{margin: 0;}
.parent{display: table; width: 100%;table-layout: fixed;}
.left,.right,.centerWrap{display:table-cell;}
.left,.right{width: 100px;}
.center{margin: 0 20px;}
</style>
复制代码
复制代码
<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>    
    <div class="centerWrap" style="background-color: orange;">
        <div class="center" style="background-color: pink;">
            <p>center</p>
            <p>center</p>
        </div>        
    </div>        
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
    </div>            
</div>
复制代码

思路四: absolute

复制代码
<style>
p{margin: 0;}
.parent{position: relative;height:40px;}
.left,.right,.center{position: absolute;}
.left{left: 0;width:100px;}
.right{right: 0;width: 100px;}
.center{left: 120px; right: 120px;}
</style>
复制代码
复制代码
<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>    
    <div class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </div>                
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
    </div>            
</div>
复制代码

思路五: flex

复制代码
<style>
p{margin: 0;}
.parent{display: flex;}
.left,.right{width: 100px;}
.center{flex: 1; margin: 0 20px;}
</style>
复制代码
复制代码
<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>    
    <div class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </div>                
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
    </div>            
</div>
查看详情

css三列css网格布局没有媒体查询(代码片段)

查看详情

css之页面三列布局

左右两边宽度固定，中间自适应 第一种方法：左右两边绝对定位html代码<divclass="left"></div><divclass="middle"></div><divclass="right"></div>css代码.left{height:200px;width:300px;background-color 查看详情

css常见两列布局三列布局(代码片段)

一、两列布局：　方法一：采用position：absollute;并设置margin-left的值。#leftposition:absolute;width:300px;top:0px;left:0px;background:#F00;#rightbackground:#0FC;margin-left:300px;<divid="left">左边定宽</div>&l 查看详情

html---三列布局

 三列布局1一1.两边固定当中自适应 2.当中列要完整显示 3.当中列要优先加载<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">*{margin:0;padding:0;}bod 查看详情

三列布局

<!DOCTYPEhtml><htmllang="en"><head>   <metacharset="UTF-8">   <title>Document</title>   <styletype="text/css">&nb 查看详情

css中常见的布局

一、css中常见的布局有哪些？（1）两列布局（2）三列布局 （3）弹性布局（4）圣杯布局（5）双飞翼布局二、具体实现 （1）两列布局    https://www.cnblogs.com/qing-5/p/11442906.html （2）三列布局   &... 查看详情

html+css布局实例：大厂阿里面试题：实现三列布局(代码片段)

三列布局今天老师上课给我们分享说她的学生面试阿里大厂的其中一道面试题：三列布局实现三列布局，左右两侧固定100px,中间自适应方法一：flex布局我只用了最简单的写法，没有加多余的修饰，如果感兴趣... 查看详情

html/css布局

一、三列布局　　三列布局要求：1.两边固定，中间自适应　　　　　　　　　2.当中列要完整显示　　　　　　　　　3.当中列要优先加载1.圣杯布局<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"... 查看详情

css——圣杯布局

...义header和footer的样式，使其宽度撑满，高度随意container中三列设置为浮动和相对定位，且center部分放在最起那么，对footer设置clear:both;清除浮动三列中的左右定宽200px，中间设置10 查看详情

css3笔记4盒模型,flex弹性布局,三列布局

...一下.触发怪异模式的条件如果想设置滚动条样式怎么办?三列布局第一种绝对定位htmlcss利用vw和calc()?float方式,要注意html的顺序htmlscss参考三列布局实现4种方法;双侧翼,还真是学习了.这样能够保证先加载中间的主要内容htmlscss不用... 查看详情

三列布局_左右绝对定位_中间适应

基本思路1.左右2列采用绝对定位来布局2.中间内容部分采用margin挤压出来<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>三列布局_左右绝对定位_中间适应</title> <styletype="text/css"> .containe 查看详情

关于页面的多种自适应布局——三列布局(代码片段)

简单结构1，列表在前，更多列表在中间，内容在后1<styletype="text/css">2.layoutbackground-color:gray;padding:10px;border:10pxsolidorange;margin:10px0;zoom:1;3.layout:aftercontent:"";clear:both;display:block;height:0p 查看详情

网易笔试题目：三列布局，中间自适应宽度，双飞翼布局

<!DOCTYPEhtml><html><head><title></title><styletype="text/css">.wrap{width:100%;}.one{float:left;width:100px;margin-right:-100px;background:yellow;min-height:100px; 查看详情

css网格布局（grid）教程

...面布局的传统方式。首先来介绍几个概念:想象一个三行三列的布局，网格线就是构成网格所有的线条，三行三列的布局每行就会有4条网格线。网格轨道就是相邻两条平行的网格线之间的部分。和flex布局一样，他会有父容器和子... 查看详情

三列自适应布局（左右定宽中间自适应）

左右定中间自适应三列布局1.绝对定位 2.浮动 3.flex11.绝对定位2<!doctypehtml>3<head>4<metacharset="utf-8"/>5<title>三栏布局</title>6<styletype="text/css">7*{8margin:0;9padding:0;10}11 查看详情

响应式布局

...时候，他会根据几种终端来显示不同的样式，在电脑上是三列，在pad上应该也是三列，在大屏手机上是三行，在屏幕小于320的手机上只 查看详情

基于浮动的布局

...精通css书籍总结的，这里介绍了如何利用浮动进行两列和三列布局！当然，两列布局以及三列布局还有其他的方式来实现，比如css3中的多列布局，以及利用table等...　　基于浮动的布局：　　利用浮动进行布局，这应该是最简单... 查看详情