三列浮动中间列宽度自适应

今天犯了个很低级的错误。。特此记入历史。。。。。。

本来需要做一个背景图平铺呢。像这样子的

因为需要在移动端的网页，所以就不能直接切背景图来用，所以切了左边一块，后边一块，中间切了一个小竖条，打算平铺。说来说去的重点就是，需要左右定位上去，中间自适应。。。。

结果我今天果然是脑袋不太好使的节奏，做来做去竟然都是这种情况：

可以看出错误吗。平铺过多了，右边本来该露出来的空白都木有露出来呢！

思来想去，各种定位浮动各种使用，把自己都搞的有点儿焦头烂额了，瞬间恍然大悟啊，我竟然给中间的div设置的100%的宽度啊！伤不起啊！！！

现在把最基础的代码贴出来供自己谨记！！！！！

<!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="Content-Type" content="text/html; charset=gb2312" />
<title>三列左右固定宽度中间自适应——AA25.CN</title>
<style>
body{
margin:0px;
}
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
height: 400px;
width: 200px;
position: absolute;
top: 0px;
left: 0px;
}
#center {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 400px;
margin-right: 202px;
margin-left: 202px;
}
#right {
background-color: #FFE7F4;
border: 1px solid #F9B3D5;
height: 400px;
width: 200px;
position: absolute;
top: 0px;
right: 0px;
}
</style>
</head>

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。华丽的分割线。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

下面再记录一个基础的问题

让一个父级宽高不固定的元素始终居中，首先，父级是position:relative;然后给目标元素position:absolute;

接下来是重点啊！

给目标元素设置一下的样式：

left:50%;

margin-left:负的元素本身宽度的一半;

top:50%;

margin-top:负的元素本身高度的一半;

这样子不管你的窗口肿么变化，不管你的父级怎么改变大小，你都不怕被它甩出去，始终占据中间的位置啦！哈哈！！

转载于:https://www.cnblogs.com/hr2014/p/4226726.html

三列浮动中间列宽度自适应相关推荐

背景图宽度自适应及背景图合并的CSS思想
关于宽度自适应,已经是前段开发人员必备的css技能之一,而背景图的合并则属于更高级别的要求. 我们为什么要宽度自适应,原因大体有以下几点: 第一:很多情况下有这样的需求,比如做B/S前端,90%以上要 ...
沫沫金：2014最新全浏览器兼容左列固定右列自适应宽度技巧大公开
做前端的人肯定会遇到经典的左列固定,右列自适应宽度的样式效果.这种想起来很简单做起来很麻烦的事情今天你有好方案了. --不要信那些什么左侧写固定宽度,右侧不用写宽度属性和浮动属性,浏览器自动就实现右列 ...
datagrid表头与数据列宽度不对齐_easyui datagrid标题列宽度自适应
最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ...
关于某题左列定宽右列宽度自适应布局的学习
今天群里有人做题发了一道题,由于最近在学习flex布局,就不禁研究了起来... 题目如下: 已知HTML结构如下,以下哪些CSS可以实现左列定宽(100px)右列宽度自适应的布局? <div c ...
Qt TableView数据列宽度自适应, 横向填满表格
Qt开发,读取数据库数据,用TableView展示,发现字段少的时候,右边空出一大块,影响外观. 怎样让各列宽度自适应,填满表格区域呢? 网上找到了答案: https://stackoverflow. ...
单列变双列css_css 两列布局中单列定宽单列自适应布局的6种思路
前面的话说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应
前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...
html列自动变高,HTML 应用多列浮动等高处理
直觉利用浮动写一个三列布局:效果如下,这就是背景. 基于此提供了一个解决方案,来使得三列均按照最高的内容的那个一列的高度为高度.因此问题的关键是为三列的高度提供一个高度的参考点.可以为三列增加一个容器 ...
table列最小宽度 vue_vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)...
mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrolltable.addeventlistener( 'scroll',(event) => ...

三列浮动中间列宽度自适应

三列浮动中间列宽度自适应相关推荐

最新文章

热门文章