CSS三栏布局——浮动

选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。

不使用定位,只使用浮动实现左右固定,中间宽度自适应布局

实现关键:

  1. 自适应部分一定要放在第一个位置,使用浮动,且宽度设置为100%,如果不设置为100%,浮动元素内容不够撑开整个宽度。
  2. 左右固定部位,使用margin-left :负数,使其左右靠齐。
  3. 中间自适应部分嵌套一个div,设置margin-left 和 margin-right 使其空出左右固定的宽度。

代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
   <meta charset="UTF-8">
   <title>三列布局</title>
   <style>
   .box{
       height: 500px;
       background-color: bisque;
       position: relative;
   }
   .box .box-content {
       height: 100%;
       float: left; 
       /* 一定要设置浮动,要不下面的模块上不来 */
       width:100%;
       /* 一定要设置100%,要不内容不够称不开整个页面 */
       background-color: blue; 
       /* 默认还是整行 */
   } 
   .box .box-content .child {
       margin: 0 210px;
           /* 中间模块空出左右距离,设置浮动 */
       background: red;
       height: 100%;
   }
   .box .box-left { 
       width: 200px; float: left; 
       margin-left: -100%; 
       /* 设置浮动, margin-left:-100% 可以使元素往上移一行,并且移动到最左边 */ 
       height: 300px; 
       background-color: green; 
   } 
   .box .box-right { 
       float: left; 
       width: 200px; 
       min-height: 100%; 
       margin-left: -200px;
       /* 设置浮动, margin-left:负的自身宽度 可以使元素往上移一行,并且移动到最右边 */ 
       background-color: pink; 
   } 
   header,footer { height: 75px; background-color: aqua; } 
</style> 
</head>
<body> 
   <header> </header> 
   <div class="box"> 
       <div class="box-content">
           <div class="child">
               中间主题内容
           </div>
       </div>
       <div class="box-left">
           左边内容
       </div>
       <div class="box-right">
           右边内容
       </div> 
   </div>
   <footer>
   </footer>
</body>
</html>

 

第二种方式是不使用margin,而是使用padding进行扩展,同时给左右元素流出空间;

<style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
    }
    .box .box-content {
        box-sizing:border-box;
        height: 100%;
        float: left; /* 一定要设置浮动,要不下面的模块上不来 */
        width:100%;/* 一定要设置100%,要不内容不够称不开整个页面 */
        /* 默认还是整行 */
        padding:0 210px;
        } 
    .box .box-content .child {
          /* 中间模块空出左右距离,设置浮动 */
        background-color: blue; 
        height: 100%;
    }
    .box .box-left { 
        width: 200px; float: left; 
        margin-left: -100%; /* 设置浮动, margin-left:-100% 可以使元素往上移一行,并且移动到最左边 */ 
        height: 300px; 
        background-color: green; 
        } 
    .box .box-right { 
        float: left; 
        width: 200px; 
        min-height: 100%; 
        margin-left: -200px;/* 设置浮动, margin-left:负的自身宽度 可以使元素往上移一行,并且移动到最右边 */ 
        background-color: pink; 
        } 
    header,footer { height: 75px; background-color: aqua; } 
</style> 
<body> 
    <header> </header> 
    <div class="box"> 
        <div class="box-content">
            <div class="child">
            <!-- 这个div只是为了方便看,设置了以下背景色 可用可不用,内容区还是自适应的 -->
                中间主题内容
            </div>
        </div>
        <div class="box-left">
            11dsdasdas不你弟弟呢单独
        </div>
        <div class="box-right">
            12酷酷酷酷酷的的是计算机技术升级的历史记录
        </div> 
    </div>
    <footer>

    </footer>
</body>

以上两种布局称为圣杯布局,至于为啥这么称呼,我也不是很明白,如果有理解的,麻烦私信。

版权声明:著作权归作者所有。

相关推荐

[译]iOS11安全区布局指南(Safe Area Layout Guide)

Apple在iOS7为UIViewController新增了topLayoutGuide和bottomLayoutGuide属性。它们可以让你创建约束以避免内容被UIKit的横条,如状态、导航或标签栏覆盖。在iOS 11这些布局指南被废弃,并被单一的安全区布局指南代替。顶部和底部布局指南——概述这是使用顶部和底部布局指南在导航控制器和标签栏插入视图控制器的示例:绿色的内容视图相对底部锚点

iOS11固定UISearchBar在导航栏的高度

iOS 11重新设计了UISearchBar,四个角改为圆角,高度变大。在导航栏添加搜索框可能会导致导航栏高度变大,所以有必要固定UISearchBar的高度。固定搜索栏的高度为44let searchBar = UISearchBar()  //配置searchBar相关代码 navigationItem.titleView =&nbs

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主

Kotlin实现Java的三元条件运算

在Kotlin没有类似Java的三元条件运算:a ? b : c 在Kotlin有几种等效的方法:ifval r =if (a) b else c whenval r = when(a) {     true 

解决IE11 Flex布局文本不换行的问题

在页面上使用了flex来布局,代码如下:CSS:.container{     display: flex;     flex-direction: column;     border: 1px solid red;     align-items: center;   }   .item {     border: 

Python定义全局变量

Python使用global指令来声明一个全局变量。示例globvar = 0 def set_globvar_to_one():     global globvar    # 在使用全局变量前,必须先声明为global    &nbs

JAVA三大特性之多态

1、介绍多态是同一个行为具有多个不同表现形式或形态的能力多态就是同一个接口,使用不同的实例而执行不同操作多态性是对象多种表现形式的体现。2、多态存在的必要条件继承子类重写父类方法父类引用指向子类对象比如:Parent parent = new Child(); 3、代码示例①、基于继承实现的多态public class { public String name = "animal";

Python替代三元表达式

在Python里时没有三元表达式:条件表达式?表达式1:表达式2但有一些替代方案:true返回的值 if 条件表达式 else false返回的值value_when_true if condition else value_when_false示例:'Yes' if fruit == 'Apple' else 'No'通过赋值的方式:fruit = 'Apple'isApple = True i

用来显示页面布局,margin,padding的CSS hack

在做前端开发过程中,有时要查看整体页面的布局,padding,margin。设置是在不同浏览器的实现情况。以下Javascript脚本可以添加到浏览器的书签中,用来打开显示页面的布局,margin以及padding。CSS hack脚本javascript: (function() { var elements = document.body.getElementsByTagName('*');