floating-boxes.htm

来自「CSS网页布局与美化」· HTM 代码 · 共 59 行

HTM
59
字号
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css"><!--.container {	border: 1px dotted #BAB9B8;	width: 800px;	overflow: hidden;	margin-bottom: 20px;}.box {	background: #FFFCC4;	border: 1px dotted #BAB9B8;	width: 200px;	height: 100px;	margin: 20px;}.floatLeft {	float: left;}.floatRight {	float: right;}--></style></head><body><div class="container"><div class="floatLeft box">Box 1</div><div class="box">Box 2</div><div class="box">Box 3</div></div><div class="container"><div class="box floatRight">Box 1</div><div class="box">Box 2</div><div class="box">Box 3</div></div><div class="container"><div class="box floatLeft">Box 1</div><div class="box floatLeft">Box 2</div><div class="box floatLeft">Box 3</div></div></body></html>

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?