CSS布局-两边固定，中间自适应

最新推荐文章于 2021-09-02 15:32:32 发布
最新推荐文章于 2021-09-02 15:32:32 发布
阅读量908 收藏
点赞数
分类专栏： html 文章标签： css html 布局 前端 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013047660/article/details/48370585
版权

直接上代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/jquery-1.7.2.min.js"></script>
    <title></title>
    <style type="text/css">
        *{ margin:0; padding:0px;}
        .header{ background:#666; text-align:center;}
        .body{ overflow:hidden;*zoom:1;}
        .wrap-2{ margin-top:30px;}
        .wrap-2 .main-2{ float:left; width:100%;margin-bottom:-3000px; padding-bottom:3000px;background:#F90;}
        .wrap-2 .main-wrap-2{  margin:0 200px 0 150px;  }
        .wrap-2 .sub-2{ float:left; margin-left:-100%; width:150px; background:#6C0; margin-bottom:-3000px; padding-bottom:3000px;}
        .wrap-2 .extra-2{ float:left; margin-left:-200px; width:200px; background:#F9F; margin-bottom:-3000px; padding-bottom:3000px;}
        .footer{ background:#666; text-align:center;}
    </style>



<body>


<div class="wrap-2">
    <div class="header">Header</div>
    <div class="body">
        <div class="main-2"><div class="main-wrap-2"><p>main-wrap</p><p>main-wrap</p></div></div>
        <div class="sub-2"><p>sub</p><p>sub</p><p>sub</p></div>
        <div class="extra-2"><p>extra</p><p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p></div>
    </div>
    <div class="footer">Footer</div>
</div>


</body>


</html>


Baron的博客
关注
专栏目录
利用flex布局实现两边固定，中间自适应
weixin_51317101的博客
05-25 8066
如何利用flex布局实现两边固定，中间自适应？
【应用】三列布局 - 两边固定宽度,中间自适应,高度一致
Dora_5537的博客
10-05 1290
一、Flex 布局 图1 <!DOCTYPE html> <html> <head> <title>三列布局-两边固定宽度,中间自适应,高度一致</title> <style> html,body{ margin: 0; padding: 0; } #main{ width: 100%...
CSS布局两边固定中间自适应
Menqq的博客
03-26 333
两边固定中间自适应 利用浮动（float） 让左右元素浮动，缺点是中间元素必须置于二者之后，不然right元素会进入下一行 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g
css布局两边固定中间自适应的四种方法
weixin_30642305的博客
04-29 825
第一种：左右侧采用浮动 中间采用margin-left 和 margin-right 方法。 代码如下： <div style="width:100%; margin:0 auto;"> <div style="width:200px; float:right; background-color:#960">这是右侧的内容 固定宽度</di...
两侧固定 中间自适应
学习记录
10-26 404
使用绝对定位        左右使用绝对定位 由于绝对定位脱离标准流  center会自动在左右的下面 使用margin 留出左右元素的宽度 这样可以使中间自适应了      div 元素 &lt;div class="boxleft"&gt;left&lt;/div&gt; &lt;div class="boxcenter"&gt;content&lt;/div&gt; &lt
两边固定，中间自适应布局
曾佳徐的博客
01-05 1035
1.浮动，先左右再中 .left{ float: left; width: 300px; height: 100px; background: #000; } .right{ width: 300px; height: 100px; float: right; background: pink; } .main{ ...
CSS 俩边固定中间自适应(4种方法)
a791226606的博客
05-25 774
俩边固定中间自适应 1、float 2、flex布局 3、position绝对定位 4、calc计算函数(移动端慎用) 推荐使用 1 2 3 种方法 第一种：float; HTML <div class="screenBox"> <div class="left"></div> <div class="right"></div> <!--如果使用float布局的话，中间的容器必须必须必须放到最后！！！--> <div cl
css 两边固定中间自适应布局的实现
09-22
通过本文所介绍的四种实现“两边固定、中间自适应”的方法，我们可以更好地理解和掌握CSS布局技术。在实际开发中，应当结合具体的布局需求和浏览器兼容情况，灵活运用不同的布局技术来实现设计要求。
使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)
11-20
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。 1...
前端面试：两边固定，中间自适应布局
elite_zhou的博客
03-28 580
普通实现 <style> .box{ display:flex } .left,.right{ width:200px height:600px background:red } .center{ width:100% height:600px background:greed } </style> <body> <div class="box"> <div class="left"></div
经典布局---两边固定中间自适应
soloPhone的博客
11-04 447
方法一：左右使用浮动，中间设置margin-left和margin-right 这种方式很简单，就是让左边的左浮动，右边的右浮动，然后通过设置中间的margin将内容从两边拉回来。 实例效果图.png 代码如下： &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt;...
三栏布局（两边固定，中间自适应）
xyjikl
11-16 704
大家理解起来应该没有什么困难，其实三栏式布局和两栏式是相同的，下面我讲一个最简单的三栏布局制作方法。 DivCss布局二--三栏布局 来源：黄超 [点击放大] 请看上面的图片，只将上篇文章中的图片变成了三栏而已，Header和Footer都没有变，所以我们只讲解中间部分的布局方法就好了。 上篇文章定义SideBar为居左显示，MainBody为居右显示，而这里是三
两边固定中间自适应的解决方案及其区别
cainiaoysa的博客
01-30 271
两边固定中间自适应的解决方案及其区别方式一：左右float浮动脱离文档流，中间水平居中布局（中间层放第三个位置）区别：有margin：0 80px 的居中效果区别：没有margin：0 80px 的居中效果方式二：左右display:absolute脱离文档流，中间水平居中布局（中间层放第三个位置）区别：有margin：0 30px 的居中效果区别：没有margin：0 30px 的效果方式三：父容器display:flex不脱离文档流，中间水平居中布局（中间层放第二个位置）区别：有margin：0 80p
css实现两边固定，中间自适应
杨前露的博客
12-12 1892
经常有需求，所以就总结一下，有需要的时候直接复制粘贴啦… 布局的原理是margin负值法。首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left块的margin负值进行配合，具体原理参考这里。这里对圣杯布局解释特别详细。 html: <div id = "wrap"> <di
css布局两边固定中间自适应的常用方法
weixin_48659263的博客
10-24 1285
css布局两边固定中间自适应 <h2>1、利用自身浮动</h2> <p>左右浮动两块div元素，脱离标准流，中间那块元素就会上去，跟他们一行，利用margin留出左右宽度</p > <div class=box1> <div class="boxLeft">左边</div> <div class="boxRight">右边</div> <!-- 注意这个div
两侧固定，中间自适应的方法
依古比古学前端
09-02 355
1.利用自身浮动 左右浮动两块div元素，脱离标准流，中间那块元素就会上去，跟他们一行，利用margin留出左右宽度. 2.利用绝对定位（子绝父相） 利用绝对定位的两块div元素，脱离标准流，中间那块元素就会上去，跟他们一行，利用margin留出左右宽度. 3.利用flex弹性布局 设置flex：1；可以自适应剩余空间。 4.利用负margin值 中间部分浮动，设置宽度100%，充满整个屏幕宽，内部一个div放置内容，利用margin留出左右两块的宽度. 5.利用display:table;
CSS三联布局，两端固定，中间自适应
前端开发学习——Teds
04-07 650
1、float方法 给左右增加浮动，中间不变，但是一定要将中间的内容放在HTML结构的最后，否则右侧会沉在中间内容的下侧 两边固定宽度，中间宽度自适应。 利用中间元素的margin值控制两边的间距 宽度小于左右部分宽度之和时，右侧部分会被挤下去 <div class="left">左</div> <div class="rig...
CSS 左右两边固定中间自适应方案
qq_33080615的博客
08-18 283
<div class="content"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> 方案一 使用定位(基础方案) .content{ position:relative; padding:0 200px 0 200px; // 上右下左 数值变换 box-sizing
CSS(一) 经典布局（两边固定，中间自适应）的五种方式
lemaktub的博客
07-06 1832
两边固定，中间自适应 本篇总结五种思路实现方式， 圣杯布局 圣杯布局，方便理解是带有两只耳朵的奖杯，耳朵跟奖杯是一体，所以左右两边跟中间同级，但是content在上面 第一步：中间盒子100%，两边固定宽度，三个盒子依次上下 第二步：全员float：left， left与right 在第二行 脱离文档流 第三步：父级盒子 不要给宽度，margin：0 200px 留出 左右盒子位置 第四步：left 盒子 （1）margin-left:100% 将浮动元素向上移动一行文档流‘ （2）positi
css 两边自适应 中间固定宽度居中
最新发布
05-16
这个问题中的需求是实现一个宽度固定，两侧自适应的布局。可以使用Flexbox布局或者CSS Grid布局来实现。具体实现方法如下： 使用Flexbox布局： ``` <div class="left"></div> <div class="center"></div> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值