CSS float 定位和缩放问题
今天调试一个看起来很简单的前端问题，但却花了太多的时间，示例代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div>
<div style="width:10%; float:left; height:200px;background-color:aqua"></div>
<div style="background-color:antiquewhite;float:right; width:90%;">
<table style="width:100%">
<thead>
<tr>
<td style="width:10%; text-align: center;"><b>状态</b></td>
<td style="width:50%; text-align: center;"><b>标题</b></td>
<td style="width:10%; text-align: center;"><b>浏览量</b></td>
<td style="width:20%; text-align: center;"><b>发布时间</b></td>
<td style="width:10%; text-align: center;"> <b>操作</b></td>
</tr>
</thead>
<tbody>
<tr bgcolor="#ffffff">
<td align="center">
<span>已发布</span>
</td>
<td>
<a href="http://www.cnblogs.com/xishuai/" target="_blank" class="big">田园里的蟋蟀</a>
</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">2016-03-17 15:26</td>
<td style="text-align: center;">修改 删除</td>
</tr>
<tr bgcolor="#ffffff">
<td align="center">
<span>已发布</span>
</td>
<td>
<a href="http://www.cnblogs.com/xishuai/" target="_blank" class="big">田园里的蟋蟀</a>
</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">2016-03-17 15:26</td>
<td style="text-align: center;">修改 删除</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
效果：
上面是我们一般设计后台使用的代码和样式，左边是菜单区域，右边是内容操作区域，但左边菜单区域因为分辨率或窗口大小进行了缩放，也就是菜单变形了，现在要求左边菜单固定宽度不拉伸，右边内容操作区域可以进行缩放，所以，我们改了下面的代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div>
<div style="width:144px; float:left; height:200px;background-color:aqua"></div>
<div style="background-color:antiquewhite;">
<table style="width:100%">
<thead>
<tr>
<td style="width:10%; text-align: center;"><b>状态</b></td>
<td style="width:50%; text-align: center;"><b>标题</b></td>
<td style="width:10%; text-align: center;"><b>浏览量</b></td>
<td style="width:20%; text-align: center;"><b>发布时间</b></td>
<td style="width:10%; text-align: center;"> <b>操作</b></td>
</tr>
</thead>
<tbody>
<tr bgcolor="#ffffff">
<td align="center">
<span>已发布</span>
</td>
<td>
<a href="http://www.cnblogs.com/xishuai/" target="_blank" class="big">田园里的蟋蟀</a>
</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">2016-03-17 15:26</td>
<td style="text-align: center;">修改 删除</td>
</tr>
<tr bgcolor="#ffffff">
<td align="center">
<span>已发布</span>
</td>
<td>
<a href="http://www.cnblogs.com/xishuai/" target="_blank" class="big">田园里的蟋蟀</a>
</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">2016-03-17 15:26</td>
<td style="text-align: center;">修改 删除</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
效果：
这个我花了很多时间进行调整，不是表格宽度超过内容区域，就是宽度不够，某个界面下调整了，但伸缩下界面，宽度又乱了，后来无意间调整了一下样式，就可以了，代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div>
<div style="width:144px; float:left; height:200px;background-color:aqua"></div>
<div style="background-color:antiquewhite; margin-left:144px">
<table style="width:100%">
<thead>
<tr>
<td style="width:10%; text-align: center;"><b>状态</b></td>
<td style="width:50%; text-align: center;"><b>标题</b></td>
<td style="width:10%; text-align: center;"><b>浏览量</b></td>
<td style="width:20%; text-align: center;"><b>发布时间</b></td>
<td style="width:10%; text-align: center;"> <b>操作</b></td>
</tr>
</thead>
<tbody>
<tr bgcolor="#ffffff">
<td align="center">
<span>已发布</span>
</td>
<td>
<a href="http://www.cnblogs.com/xishuai/" target="_blank" class="big">田园里的蟋蟀</a>
</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">2016-03-17 15:26</td>
<td style="text-align: center;">修改 删除</td>
</tr>
<tr bgcolor="#ffffff">
<td align="center">
<span>已发布</span>
</td>
<td>
<a href="http://www.cnblogs.com/xishuai/" target="_blank" class="big">田园里的蟋蟀</a>
</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">2016-03-17 15:26</td>
<td style="text-align: center;">修改 删除</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
主要改进是在右侧内容区域增加margin-left:144px样式，并且宽度要和菜单区域的宽度一致，缩放效果：
CSS float 定位和缩放问题的更多相关文章
- CSS 的定位方式和含义
CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...
- 对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
- css区块定位之浮动与清除属性
float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...
- CSS之定位布局（position，定位布局技巧）
css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...
- 复习-css元素定位
css元素定位 <style type="text/css"> body{ margin: 15px; font-family: "Adobe 宋体 Std ...
- CSS float和position属性
1. 浮动 CSS float属性定义了元素在水平方向的浮动.该元素从网页的正常流动(文档流)中移除,对于浮动元素后的块级元素,块级元素将会被浮动元素覆盖,并且会接着其上一个文档流中的元素,按文档流的 ...
- 18 12 28 css 浮动 定位
浮动 浮动特性 1.浮动元素有左浮动(float:left)和右浮动(float:right)两种 2.浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 3.相邻浮动的块元素可以并在一行, ...
- 【WEB自动化】【第一节】【Xpath和CSS元素定位】
目前自动化测试开始投入WEB测试,使用RF及其selenium库,模拟对WEB页面进行操作,此过程中首先面对的问题就是对WEB页面元素的定位,几乎所有的关键字都需要传入特定的WEB页面元素,因此掌握常 ...
- [译]HTML&CSS Lesson5: 定位
CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置,使我们的设计具有结构,使内容更加易懂. CSS有好几种不同的定位属性,每种都有自己的使用场景.在这节课中我们会通过不同的案例--可复用 ...
随机推荐
- ASP.NET Core应用的错误处理[2]：DeveloperExceptionPageMiddleware中间件如何呈现“开发者异常页面”
在<ASP.NET Core应用的错误处理[1]:三种呈现错误页面的方式>中,我们通过几个简单的实例演示了如何呈现一个错误页面,这些错误页面的呈现分别由三个对应的中间件来完成,接下来我们将 ...
- SQL Server 数据加密功能解析
SQL Server 数据加密功能解析 转载自: 腾云阁 https://www.qcloud.com/community/article/194 数据加密是数据库被破解.物理介质被盗.备份被窃取的最 ...
- Xamarin+Prism开发详解二：Xaml文件如何简单绑定Resources资源文件内容
我们知道在UWP里面有Resources文件xxx.resx,在Android里面有String.Xml文件等.那跨平台如何统一这些类别不一的资源文件以及Xaml设计文件如何绑定这些资源?应用支持多国 ...
- html5 canvas常用api总结(二)--绘图API
canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API. 绘画的时候canvas相当于画布,而 ...
- 基于DFA敏感词查询的算法简析
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 项目中需要对敏感词做一个过滤,首先有几个方案可以选择: a.直 ...
- 用FSM一键制作逐帧动画雪碧图 Vue2 + webpack
因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最 ...
- C++标准库实现WAV文件读写
在上一篇文章RIFF和WAVE音频文件格式中对WAV的文件格式做了介绍,本文将使用标准C++库实现对数据为PCM格式的WAV文件的读写操作,只使用标准C++库函数,不依赖于其他的库. WAV文件结构 ...
- 工行ICBC_WAPB_B2C支付接口
一. 前期准备 手机银行(WAP)B2C在线支付接口说明V1.0.0.6.doc 手机银行移动生活商户及门户网站js接口API.doc 支付组件ICBCEBankUtil.dll和infosecapi ...
- C# 工厂模式+虚方法(接口、抽象方法)实现多态
面向对象语言的三大特征之一就是多态,听起来多态比较抽象,简而言之就是同一行为针对不同对象得到不同的结果,同一对象,在不同的环境下得到不同的状态. 实例说明: 业务需求:实现一个打开文件的控制台程序的d ...
- 通过squid 禁止访问/只允许访问指定 网址
安装 squid yum install squid -y 备份squid.conf cp squid.conf squid.conf-list vi squid.conf 输入: acl de ...