105左中右三列布局

最新推荐文章于 2023-04-12 00:24:31 发布
最新推荐文章于 2023-04-12 00:24:31 发布
阅读量84 收藏
点赞数
原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10967237.html
版权 
1、左中右三列布局=>方法一：calc+inline-block。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右固定宽，中间自适应</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .left{
            width:200px;
            height:500px;
            display:inline-block;
            background:green
        }
        .right{
            width:200px;
            height:500px;
            display:inline-block;
            background:green
        }
        .middle{
            margin:0 10px;
            width:calc(100% - 420px);
            height:500px;
            display:inline-block;
            background:red
        }
        .fontSize0{
            font-size: 0;
        }
    </style>
</head>
<body>
<div class="fontSize0">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>
</body>
</html>
```
2、左中右三列布局=>方法一：双浮动+margin。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右固定宽，中间自适应</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .left{
            width:200px;
            height:500px;
            float:left;
            background:green
        }
        .right{
            width:200px;
            height:500px;
            float:right;
            background:green
        }
        .middle{
            height:500px;
            margin-left:210px;
            margin-right:210px;
            background:red
        }
    </style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</body>
</html>
```
3、左中右三列布局=>方法二：双定位+margin。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右固定宽，中间自适应</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .left {
            top: 0;
            left: 0;
            width: 200px;
            height: 500px;
            position: absolute;
            background: green;
        }
        .middle {
            height: 500px;
            margin-left: 210px;
            margin-right: 210px;
            background: red;
        }
        .right {
            top: 0;
            right: 0;
            width: 200px;
            height: 500px;
            position: absolute;
            background: green;
        }
    </style>
</head>
<body>
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</body>
</html>
```
4、左中右三列布局=>方法三：三定位
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右固定宽，中间自适应</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .left {
            top: 0;
            left: 0;
            width: 200px;
            height: 500px;
            position: absolute;
            background: green;
        }
        .middle {
            top: 0;
            left: 210px;
            right: 210px;
            background: red;
            height: 500px;
            position: absolute;

        }
        .right {
            top: 0;
            right: 0;
            width: 200px;
            height: 500px;
            position: absolute;
            background: green;
        }
    </style>
</head>
<body>
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</body>
</html>

```
5、左中右三列布局=>方法四：flex。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右固定宽，中间自适应</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .flex {
            display: flex;
        }
        .left{
            width: 200px;
            height: 500px;
            background: green;
        }
        .middle{
            flex: 1;
            margin:0 10px;
            height: 500px;
            background: red;
        }
        .right {
            width: 200px;
            height: 500px;
            background: green;
        }
    </style>
</head>
<body>
<div class="flex">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>
</body>
</html>
```

转载于:https://www.cnblogs.com/gushixianqiancheng/p/10967237.html

weixin_30654583
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div布局三栏-左中右
mingtian369的专栏
08-13 9116
下面代码构造div分为3烂，左中右，主要通过float浮动来设置，side靠左浮动，side1靠右浮动，main自动适应调整自身宽度。 body{margin:0px;} //整个网页左右无空白 #side { background: #99FF99; height: 300px; width: 120px; float: left; } #side1 { backgr
div三栏布局左中右通过float浮动来设置
09-25
构造div分为3烂，左中右，主要通过float浮动来设置，side靠左浮动，side1靠右浮动，具体示例代码如下，需要的朋友可以参考下
DIV左、右布局
weixin_30413739的博客
03-14 303
1、右边宽度固定，左边自适应 　　第一种(flex布局，不兼容IE9以下浏览器)： <style> body { display: flex; } .left { background-color: aqua; height: 200px; flex: 1; } ...
HTML div左中右布局
weixin_41463944的博客
06-18 778
<template> <div id="wai"> <div class="divleft"> </div> <div class="divmiddle"> </div> <div class="divright"> </div> </div> </template> <script&g
CSS-DIV左中右结构
sprone的专栏
12-23 411
一个简单的左中右，为了做到大多的浏览器兼容却不容易。 一个工作几年的专业前台程序员不知道一些用法也是正常。 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; New Document &lt;/title&gt; &lt;meta http-equiv="Content-Type" conte..
css页面左中右分栏布局示例
09-25
总结来说，这个示例展示了如何利用CSS实现一个基础的左中右分栏布局，通过绝对定位和相对定位结合，以及适当的宽度和外边距，成功地将页面内容分隔成三个区域。虽然现代CSS布局技术已经发展得更为先进，但这个示例...
css页面中常见左中右分栏布局的两种实现方式
09-25
页面左中右分栏布局在目前的网页布局中是比较常见的，下面就与大家分享两个不错的方法可以实现左中右分栏布局，代码很详细，需要的朋友可不要错过
详解css布局实现左中右布局的5种方式
09-24
虽然不常用，但CSS列布局也可以用于创建简单的左中右布局，但通常更适用于多列文本内容。 ```css .container { columns: 3 300px; } .left, .right { column-span: all; } ``` HTML 结构如下： ```html 左边 ...
h5左中右经典布局demo
12-12
本示例"左中右经典布局demo"旨在演示如何构建一个标准的网页布局，其中包括了header、content和footer三个主要部分，并展示了如何实现文字和元素的居中对齐。下面我们将深入探讨这些知识点。 首先，我们来看“左中...
HTML中的div怎么左中右布局,CSS 之 div 左中右布局
weixin_33676046的博客
06-22 883
无标题文档#header{width:780px;height:80px;background:#069;margin:0 auto;}#box {width:780px; margin:0 auto; border:10px solid #000;border-radius:38px;}#left {width:180px;height:300px;background:#f90;float:l...
Div+Css实现经典左中右布局
热门推荐
loringray的博客
04-22 1万+
三栏布局，中间自适应高度 效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
div + css 布局中的一些小技巧 左中右布局 （二）
Y_xxxxx的博客
09-07 295
想要实现这种布局，第一反应是什么？ 浮动？ 其实可以试试用定位： <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> .left, .right { position: absolute; top:.
典型的DIV＋CSS布局——左中右版式
weixin_34292959的博客
11-19 214
【效果】 【HTML】 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" StylesheetTheme="Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHT...
1. 实现左中右三栏布局，左右固定宽度，中间自适应（五种方式）（清除浮动）
sunnnnh的博客
04-24 2159
五种方法：1.浮动 float 2.定位 position 3.弹性盒子布局 flex 4.表格布局 table 5.网格布局 grid 方法1：浮动 --float （1）浮动原理： 当一个元素浮动之后，就会移出正常的文档流（内联元素与p标签会识别float为正常文档流。），向左或向右平移，直到碰到了所处容器的边缘，或者碰到另外一个浮动的元素。 一旦让div浮动起来，其父元素立刻会像inline一样产生包裹性（包裹性就是父元素的宽度会收缩到和内部元素宽度一样，float属性会改变元素dis...
三列自适应布局（左右定宽 中间自适应）
dianduojian8843的博客
10-05 135
左右定中间自适应三列布局 1.绝对定位2.浮动3.flex 1 1.绝对定位 2 <!doctype html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>三栏布局</title> 6 <style type="tex...
div上固定，下自适应；div左固定，右自适应
lgx211
05-06 1343
一，上固定，下自适应 二，下固定，上自适应 三，上下固定，中间自适应 四，左固定，右自适应 五，仿网站布局 六，仿xshell布局
左中右 三栏式 布局
慢才后生
04-12 1303
https://blog.csdn.net/a18792627168/article/details/79686746?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-2-79686746-blog-80587167.235%5Ev28%5Epc_relevant_t0_download&depth_1-utm_source
html盒子在始终在左侧,div盒子在一行方法(左中右结构 CSS布局)
weixin_39633089的博客
06-02 5907
div盒子在一行的css布局方法默认情况下div盒子是独占一行的，设置css宽度依然div盒子也独占一行，那么如何使用css让div盒子在一行呢？div排成一排方法有二，第一种采用css float，第二种采用css display实现。一、css浮动让div一行对div设置float浮动样式即可，让div排成一行，只要要排成一行div盒子宽度之和小于或等于上一级(父级)那么再多div盒子都会排成...
CSS 左中右三列布局5种方式
卡卡西：一个擅长拷贝的前端程序员
06-20 4338
CSS 左中右三列布局左右固定宽度，固定位置，中间自适应的5种方式 上中下三行布局，上下固定高度，中间自适应的4种方式
flex 左中右 自适应间隔布局
最新发布
06-27
在 Flexbox 中，你可以轻松地实现左、中、右自适应间隔布局（也称为弹性布局）。 1. **设置主轴（main axis）方向**：使用 `flex-direction` 属性，可以选择 `row`（默认值，元素沿水平方向排列）或 `column`（元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值