前端页面横向多栏布局记述

最新推荐文章于 2024-08-15 20:53:53 发布

JettyYao

最新推荐文章于 2024-08-15 20:53:53 发布

阅读量1.1k

点赞数

文章标签：前端 CSS

本文链接：https://blog.csdn.net/weixin_40191445/article/details/83215072

版权

本文探讨了在前端开发中实现三栏布局的五种方法：浮动布局、绝对定位、flexBox、表格布局和网格布局。重点推荐使用flexBox和表格布局，因在子元素内容增加时能保持整体布局稳定，同时提到了对旧版浏览器的兼容解决方案。

摘要由CSDN通过智能技术生成

随着显示器及电子设备的发展，如何适应设备尺寸并且不破坏原有的前端设计样式成了最大的考虑，现在记录并复习前端分栏技术的应用

假设高度100px，实现三栏布局，左右固定，中间部分适应

实现效果图如下

在这里插入图片描述

公共样式

	<style>
	*{
   
	  margin: 0;
	  padding: 0;
	}
	.Box{
   
	  margin-top: 20px;
	}
	.Box>div{
   
	  min-height: 100px;
	}
	</style>

Method One ( 浮动布局 )

    <section>
    <style>
      .float.left{
   
        float: left;
        width: 300px;
        background-color: red;
      }
      .float.right{
   
        float: right;
        width: 300px;
        background-color: blue;
      }
      .float.center{
   
        background-color: yellow;
      }
    </style>
    <article class="Box">
      <div class="float left"></div>
      <div class="float right"