css布局-基础,单列,双列,三列

html-css013

css布局-基础,单列,双列,三列,第1张

现有样式

不能满足人们的需求.

人们需要:

CSS 2 并没有提供原生支持,所以需要将一些属性组合起来,以实现布局

国外一般不这么叫. <div> 是一个无语义的标签,适合用来做与内容无关的事情.

只能用 <div> 吗?

优化:

省标签,便于控制局部 范例

给通栏加背景色 范例

IE 6 不支持 inline-block :

范例

一列固定宽度,另外一列自适应宽度

浮动元素 + 普通元素margin 范例

如果侧边栏在右边:

注意: 考虑到浏览器的渲染顺序,

aside和main顺序不可更改.

两侧两列固定宽度,中间列自适应宽度

范例

实际宽度虽然不对,但是效果上是对的,一般都是这样解决的。如果要求实际宽度对的话要用js了(一般不会有这样的要求吧,这样用不好)。

<!DOCTYPE html>

<html>

<head>

<title>test</title>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf8" />

<style>*{padding:0margin:0}</style>

</head>

<body>

<div style="float:leftborder:1px red solidwidth:400pxheight:800px"></div>

<div style="border:3px blue solid">

test text!

<div>div</div>

<div style="float:left">float</div>

<div style="clear:both"></div>

</div>

</body>

</html>