三列布局中,怎么设置左右固定,中间列自适应,且都显示在同一行。

左可以 .left{width:200px;background:red;height:500px;position:absolute;left:0;top:0;}
右可以.right{width:300px;height:500px;position:absolute;right:0;top:0;background:blue}
中间可以.center{height:500px;background:orange;margin:0 310px 0 210px}先把左右设置为绝对定位,然后再把中间的列设置margin就可以实现了。

//当然可以这样实现三列在同一行显示
左可以 .left{width:33.3%;background:red;height:500px;float:left;}
右可以.right{width:33.3%;height:500px;float:right;background:blue}
中间可以.center{height:500px;width:33.3%;background:orange;float:left;}//三个宽度可以自行设置百分比
 
时间: 2024-10-14 20:41:39

三列布局中,怎么设置左右固定,中间列自适应,且都显示在同一行。的相关文章

网页布局——三列布局(左侧和右侧固定,中间自适应)

一:flex弹性布局 <!DOCTYPE> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding: 0;margin: 0;} body{ display: flex; } .left,.center,.right{ height: 200px; } .left

两列布局,左边div固定宽度,右边宽度自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont

CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞翼之外,循序渐进地介绍一下我们可以如何实现一个三列布局. 1. 首先,使用浮动布局来实现一下 See the Pen float-three-columns by xal821792703 (@honoka) on CodePen. 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的

css 两列布局中单列定宽单列自适应布局的6种思路

前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现布局 float [思路一]float 说起两列布局,最常见的就是使用float来实现.float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动.如果各浮动元素的高度不同时,可能会出犬牙交错的效果 [1]float + margin 将定宽的一列使用float,而自适应的一列使用计

两列布局中单列定宽单列自适应布局的5种思路

× 目录 [1]float [2]inline-block [3]table[4]absolute[5]flex 前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute和flex这五种思路来详细说明如何巧妙地实现布局 思路一: float 说起两列布局,最常见的就是使用float来实现.float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动.如果各浮动元素的高度不同时,可能会出犬牙交错

Excel-vlookup(查找值,区域范围,列序号,0)如何固定住列序列号,这样即使区域范围变动也不受影响

突然,发现VLOOKUP的列序列号并不会随着区域范围的改变而自动调节改变,只是傻瓜的一个数,导致V错值.所有,就想实现随表格自动变化的列序号. 方法一:在列序号那里,用函数得出永远想要的那个列在区域范围中的列数:区域范围内的目标列COLUMN值-区域范围首列COLUMN值+1 =VLOOKUP(I2,$B$2:$G$15,COLUMN($G$2)-COLUMN($B$2)+1,0) 方法二: 原文地址:https://www.cnblogs.com/Formulate0303/p/1104544

[笔记]格式化jqGrid中的日期与时间,解决时分秒都显示为0

项目中的一个jqGrid列表页面的一列需要显示日期和时间,如:2011-08-10 10:20:30,查阅官方wiki文档的说明和例子,然后在colModel的需要格式化时间的列的formatter:'date'的后面加了一些 formatoptions配置,但IE和FF浏览器中都没有效果,也没提示什么错误~ 无奈官方wiki文档的日期时间格式化部分的说明和例子对我来说不够细,只好查看jquery.fmatter.js中的源代码的DateFormat部 分,还好查出来了,原来srcformat和

CSS基础知识点小计1-选择符权重优先级及两列布局中一列自适应,另一列固定宽度

1:标有!important标记的样式 2:HTML编辑的样式 3:用户设置的样式 4:浏览器默认的样式 一列自适应,另一列固定宽度,个人认为如下方法比较好用 <!DOCTYPE html> <html> <head> <title> html5 </title> <link rel="stylesheet" type="text/css" href="css.css"> &

用margin实现两列布局中的自适应列

<div id="wrapper"> <div id="col1"> "fixed" </div> <div id="col2"> "fluid" </div> </div> #wrapper{background:red;float:left;width:90%;height:200px;padding:5px} #col1{ flo