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

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

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. Hibernate Criteria Restrictions

    HQL运算符 QBC运算符 含义 = Restrictions.eq() 等于equal <>  Restrictions.ne() 不等于not equal >  Restrict ...

  2. LINQ查询操作符之First、FirstOrDefault、Last、LastOrDefault、ElementAt、ElementAtOrDefault、Contains、Any、All、Coun

    ·First - 返回集合中的第一个元素:不延迟 ·FirstOrDefault - 返回集合中的第一个元素(如果没有则返回默认值):不延迟 ·Last - 返回集合中的最后一个元素:不延迟 ·Las ...

  3. 谈谈JDK线程的伪唤醒

    在JDK的官方的wait()方法的注释中明确表示线程可能被"虚假唤醒",JDK也明确推荐使用while来判断状态信息.那么这种情况的发生的可能性有多大呢? 使用生产者消费者模型来说 ...

  4. 欲实施CRM软件，必须先懂什么是CRM软件

    CRM是Customer Relationship Management(客户关系管理)的缩写,它是利用信息科学技术,实现市场营销.销售.服务等活动自动化,使企业能更高效地为客户提供满意.周到的服务, ...

  5. html+css复习之第3篇 | jquery | bootstrap

    html+css复习之第3篇 | jquery  | bootstrap

  6. oracle分区提高篇

      一. 分区表理论知识 Oracle提供了分区技术以支持VLDB(Very Large DataBase).分区表通过对分区列的判断,把分区列不同的记录,放到不同的分区中.分区完全对应用透明. Or ...

  7. struts_表单得到数据

    在大家学习struts表达式语言的时候经常会遇到,从表单的提交上面得到数据, 而如何将表单的数据得到呢? 下面就介绍其中的一种方式: :以类的方式进行注入我们以login为例子 首先可以在struts ...

  8. 思科Cisco 2960系列交换机配置命令

    配置密码: 2960>en :第一次密码为空 2960h#conf t :进入全局配置模式 2960(config)#hostname swa :设置交换机名 2960(config)#enab ...

  9. anaconda win10安装报错：UnicodeDecodeError解决方法

    Traceback (most recent call last): File , in <module> import conda.cli File , in <module> ...

  10. [问题2014A01] 解答二（后 n-1 列拆分法，由郭昱君同学提供）

    [问题2014A01] 解答二(后 n-1 列拆分法,由郭昱君同学提供) \[|A|=\begin{vmatrix} 1 & x_1^2-ax_1 & x_1^3-ax_1^2 &am ...