学了前端挺久了。近期写一个项目測试系统,布局时发现自己对变宽+固宽的布局还没有全然掌握,所以在这里总结一下,以后须要的时候回头看看。

1.最简单的当然是一列或多列固宽

比如两列固宽:

<1>.设置一个外围div——container。是两列显示的总大小,能够是固定800px等值。

<2>.在container内分别设置两个div——side、content

依据须要设置像素,比方一个是300px,还有一个是500px;

分别设置float:left;

,仅仅只是将像素改为百分比,比如是一个30%,还有一个70%

3.重点来啦,两列或多列中有固宽,有变宽——典型的是一列左固宽,一列右变宽

<1>.设置一个外围div——container。是两列显示的总大小,能够是固定800px等值。

<2>.在container内分别设置两个div——side、wrap_content

依据须要设置宽度,比方一个是width:300px。还有一个是width:
100%;

margin-right: -300px;

<3>.分别设置float: left;

<4>.在wrap_content内再设置一个div:content,margin-right:
300px;

相同,假设是左固宽,右变宽也是一个道理。

另外有道友回复中提到第二种方式:

就是<1>前两步和我的同样<2>side设置float: left,而wrap_content仅仅设置margin-left: 300px <3>content设置为width:100%

飞试測试过,是可行的。感谢这位朋友宅回复~~~也相同欢迎亲们回复很多其它布局方法,大家互相学习互相进步哦。

CSS布局篇——固宽、变宽、固宽+变宽的更多相关文章

  1. 深入css布局篇(3)完结 — margin问题与格式化上下文

    深入css布局(3) - margin问题与格式化上下文      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...

  2. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

  3. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  4. html+css 布局篇

    float 做了float后有一些不好的影响. 1.背景不能显示 由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景 ...

  5. css布局篇

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 3.实战HTML+CSS布局(实例入门篇)

    转自:https://www.cnblogs.com/hmyprograming/archive/2012/03/23/2414373.html 学习这篇入门教程我们假定你已经具有了一定的HTML基础 ...

  7. [面试仓库]CSS面试题汇总--布局篇

    一,盒模型   说到 CSS 布局这块的内容,首当其冲的就是我们的盒模型宽度计算问题,在开始我们的问题之前,我们首先要搞懂这些概念: 盒模型里面的内容(content): 也就是实实在在要展现的内容, ...

  8. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  9. 第九篇、CSS布局

    <!--css布局 标准流:从上到下 从左到右 脱离标准流:(浮在父控件的最左边或者最右边)(类似ios在window上添加的控件) 1.float: 2.position: absolute( ...

随机推荐

  1. CF 420B Online Meeting 模拟题

    只是贴代码,这种模拟题一定要好好纪念下 TAT #include <cstdio> #include <cstring> #include <algorithm> ...

  2. Linux下无需输入password自己主动登陆sshserver方法

    用OpenSSH在linux下登陆sshserver时.每次都提示要输入password,并且使用vim 的netrw插件编辑远程文件时每次改动后保存都要输password,很麻烦. 查看了netrw ...

  3. 在eclipse中公布maven的多模块web项目到tomcat上及单步debug模块jar

    1.在eclipse中公布maven的多模块web项目到tomcat eclipse和maven及tomcat的部署略去,还有maven的基础知识和使用在此处略去. 依照例如以下的步骤操作: 将lib ...

  4. hdoj--1034--Hidden String(dfs)

    Hidden String Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) ...

  5. 5.应用与模块(ng-app)

    转自:https://www.cnblogs.com/best/tag/Angular/ 自动载入启动一个AngularJS应用,声明了ng-app的元素会成为$rootScope的起点 每个HTML ...

  6. Gym - 100203I I WIN 网络流

    Gym - 100203I  I WIN 题意:一个n*m的矩阵包含W,I,N三种字符,问相邻的字符最多能组成不重叠的WIN. 思路:比赛的时候没有发现是网络流,,居然一度以为是二分图匹配,,写了一下 ...

  7. C#中如何获得两个日期之间的天数差 ( c# 计算两个日期之间相差的天数 )

    DateTime dtLast = new DateTime(Convert.ToInt32(LastMenses.Year), Convert.ToInt32(LastMenses.Month), ...

  8. Codefroces A. Saitama Destroys Hotel

    A. Saitama Destroys Hotel time limit per test 1 second memory limit per test 256 megabytes input sta ...

  9. 利用 urandom 生成随机密码

    cat /dev/urandom | LC_ALL=C tr -dc "[:alnum:]" | fold -w 16 |head -3   说明: fold -w 16  指定密 ...

  10. How Javascript works (Javascript工作原理) (十二) 网络层探秘及如何提高其性能和安全性

    个人总结:阅读完这篇文章需要20分钟,这篇文章主要讲解了现代浏览器在网络层传输所用到的一些技术, 应当对 window.performance.timing 这个API所有了解. 这是 JavaScr ...