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

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

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. 安卓与PC网络对接实现视频实时播放

    研究安卓网络通信一段时间了,  由于最近公司催的比较紧, 硬着头皮弄出来了. 现在手机客户端终于能够连接流媒体服务器实时播放前端的视频流了. 其实通信方面主要还是命令包的解析, 以及分包组包. 比如要 ...

  2. QTP vbs学习

    1.helloworld Dim helloworld helloworld = "QTP自动化测试技术导航" mxgbox helloworld   2.显示申明变量 Optio ...

  3. Java：String和Date、Timestamp之间的转

    Java:String和Date.Timestamp之间的转 一.String与Date(java.util.Date)互转 1.1 String -> Date String dateStr  ...

  4. @weakify, @strongify ObjC的Block中使用weakSelf/strongSelf @weakify/@strongify

    首先要说说什么时候使用weakSelf和strongSelf. 下面引用一篇博客<到底什么时候才需要在ObjC的Block中使用weakSelf/strongSelf>的内容: Objec ...

  5. SIP协议栈基础笔记

    //------------------SIP基础------------------------// SIP是基于UDP的协议 UA(user Agent)用户代理 UAC(client)发起SIP ...

  6. HTML5视频播放在ios下浮动元素无法点击的解决方案

    最近许多人在微博上问到在iPad.iPhone.iTouch等设备上使用HTML5播放视频,在视频上方悬浮一个div元素,div内的元素无法点击的情况,而在PC浏览器上没有这个问题. 这个现象是设备特 ...

  7. windows 中 使用MongoDB

    MongoDB简介 MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数据库中比较热门的一种.它在许多场景下可用于替代传统的关系型数据库或键/值存储方式. 传统的关系数据库一般由 ...

  8. 事务码 ListSchema：查看Cube星型结构Schema

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  9. [bzoj3555]企鹅QQ(hash)

    3555: [Ctsc2014]企鹅QQ Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 1645  Solved: 616[Submit][Statu ...

  10. Flex debug版本浏览器选定问题

    原来都用IE进行调试的,今天安装了火狐浏览器,结果出现调试器找不到的错误,如下图 需要做下面设置 "窗口"—>"首选参数",下图位置勾选项改为IE,问题就 ...