css布局之一列布局

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

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

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水平居中对齐

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

时间： 2024-11-16 01:14:32

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

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

1.一列布局 (一)一列自适应 自适应浏览器,随着浏览器的拉伸而变化,一般宽度采用百分比的写法,很简<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>一列布局自适应</title> <style type="text/css"> body{ margin: 0; /*清除浏览

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

三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>三列自适应</title> 6 <style type="text/

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

一.使用float实现横列布局的方法 如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 div1 div2 实现下面图片中布局的css样式如下: 分析: 1.第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px.布局如下: <section class="active_div1"> <div> <img id="active_div11" src="">

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

这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>三列布局,左右固定值,中间自适应</title> <style type="text/css"> .container{p

CSS 常见两列布局、三列布局

一.两列布局: 方法一:采用position:absollute;并设置margin-left的值. #left{ position:absolute; width:300px; top:0px; left:0px; background:#F00; } #right{ background:#0FC; margin-left:300px; } <div id="left">左边定宽</div> <div id="right">右

CSS 经典三列布局

一 圣杯布局 1 html结构 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/css.css"> </head> <body> <div class="header">头部<

CSS布局 两列布局之单列定宽,单列自适应布局思路

前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, flex, grid 这几个布局方式来实现这种效果 float [float + margin] 将定宽的一列使用float,而自适应的一列使用计算后的margin <style> .f1 .parent{overflow: hidden;zoom: 1;} // 触发bfc和haslayout来闭合

纯CSS实现三列布局(两边固定，中间自适应)

看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西. 也是给我自己复习吧,以前有人问道,我还没答上来呢.＝＝ 看代码: html: 1 <div class="top">this is top</div> 2 <div class="container"> 3 <div class="left">this is left</div> 4 <div class=&qu

布局-两列布局（一列定宽，一列自适应）

结构: 1 <div class="parent"> 2 <div class="left"> 3 <p>left</p> 4 </div> 5 <div class="right"> 6 <p>right</p> 7 <p>right</p> 8 </div> 9 </div> 样式: 1.解决方案一: