在我们浏览网页中经常看见一列布局其实一列布局就是

一般的一列布局的都是固定宽度的

body{margin:0;padding:0}
.main{width:800px;height:300px;background:#ccc;margin:0 auto}
<body>
<div class="main"></div>
</body>

margin: 0 auto 就是给div水平居中对齐

在一般做开发的时候,不会设置高度,这里是为了凸显是居中,所以设置了一下高度

css布局之一列布局的更多相关文章

  1. 简单的CSS网页布局--一二列布局

    1.一列布局 (一)一列自适应 自适应浏览器,随着浏览器的拉伸而变化,一般宽度采用百分比的写法,很简<!DOCTYPE html> <html> <head lang=& ...

  2. 简单的CSS网页布局--三列布局

    三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...

  3. css实现三列布局,左右固定值,中间自适应。

    这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...

  4. CSS实现横列布局的方法总结

    一.使用float实现横列布局的方法 如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 div1 div2 实现下面图片中布局的css样式如下: 分析: 1.第一行第一 ...

  5. [CSS布局]3列布局:左右两列固定宽度、中间列自适应满宽

    一种常见的3列布局,左右两列固定宽度.中间列自适应满宽.整个网页不出现横向滚动条 纯CSS实现 效果图: 代码: <!DOCTYPE html> <html lang="e ...

  6. 一、CSS实现横列布局的方法总结

    一.使用float实现横列布局的方法 如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 div1 div2 实现下面图片中布局的css样式如下: 分析: 1.第一行第一 ...

  7. css布局--两列布局,左侧固定,右侧自适应(其中左侧要可以拖动,右侧水平滚动条)

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  8. css布局之三列布局

    网站上使用三列布局的还是比较多的,不过三列和两列有些相似: 1.自适应三列 <!DOCTYPE html> <html lang="en"> <hea ...

  9. CSS实现三列布局

    三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...

随机推荐

  1. 十一、Java基础---------内部类与匿名内部类

    内部类分为普通内部类(有名)和匿名内部类.普通内部类分为成员内部类.局部内部类.静态内部类(嵌套内部类).顾名思义,内部类就是定义在一个类内部的类.什么时候都会使用内部类呢?当我们定义一个类,发现内部 ...

  2. REST实战:SeverClient项目+RESTful理论

    理解一个新的技术,无疑就是使用它了,下面我们就通过一个可执行的demo来展现REST的原理和使用. 一 Demo 1.1 服务器端 1 主程序MainServer.java负责启动一个REST服务组件 ...

  3. eclipse启动时虚拟机初始内存配置

    eclipse启动时虚拟机初始内存配置: -Xms256M -Xmx512M -XX:PermSize=256m -XX:MaxPermSize=512m

  4. 1350. Primary Arithmetic

    Children are taught to add multi-digit numbers from right-to-left one digit at a time.  Many find th ...

  5. Android LayoutParams简介

    LayoutParams是子控件控制自己在父控件中布局的一个类. 不同布局都有相对的LayoutParams,最简单的LinearLayout.LayoutParams类可以设置布局的宽高. 我在写一 ...

  6. jQuery右键菜单contextMenu使用实例

    在最近项目中需要频繁的右键菜单操作.我采用了contextMenu这款jQuery插件. 参考网址:http://www.jb51.net/article/58709.htm 官网demo http: ...

  7. jQuery判断元素是否存在方法

    1.使用javascript判断元素是否存在 if(document.getElementById('div')) { } else { } 2.使用jquery判断元素是否存在 if ($(&quo ...

  8. [问题2015S02] 复旦高等代数 II(14级)每周一题(第三教学周)

    [问题2015S02]  设 \(a,b,c\) 为复数且 \(bc\neq 0\), 证明下列 \(n\) 阶方阵 \(A\) 可对角化: \[A=\begin{pmatrix} a & b ...

  9. Working with Binary Data in Python

    http://www.devdungeon.com/content/working-binary-data-python

  10. .NET IL学习笔记(一)

    参考资料: 1. <.NET IL Assembler> 2. NGEN代码产生器 3. NGEN的使用 4. IL编辑器下载 5. IL编辑器的使用 知识点: ● Common Lang ...