`

盒子水平排列

XHTMLCSSHTML 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.boxs {
	background-color: #CCC;
	height: 400px;
	width: 400px;
}
.box1 {
	background-color: #9C3;
	height: 100px;
	width: 100px;
	border:#666 thin solid;
	float:left;
}
.box2 {
	background-color: #7C3;
	height: 100px;
	width: 100px;
	border:#666 thin solid;
	float:left;
	margin-left:50px;
	padding:20px;
}
</style>
</head>

<body>
<div class="boxs">
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
</div>

</body>
</html>
 
分享到：
| 子盒子居中
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS3样式表-框模型（盒子模型）.pptx

    6 框模型（盒子模型）13内边距框模型概述42边框外边距文档结构与标准文档流span为inline元素，若干个inline元素是水平排列的body，ul，li为block元素，它们独占一整行，兄弟之间垂直排列1框模型（盒子模型）所有页面...

    CSS设计彻底研究

    第2章：向读者展示CSS能够给网页设计带来的效果。 第3章：深入讲解CSS的核心机制——盒子模型。 第4章：讲解CSS布局的重点和难点——浮动和...第8章：制作复杂一些的水平排列的导航菜单。 第9章：制作两级的下拉菜单。

    详解CSS中的flex布局

    弹性盒子默认是从左到右的方向，此时的轴是水平方向的， flex-direction 默认属性为 row .box{ display:flex;}   可以通过修改 flex-direction 属性来改变排列方向，也就是把轴变为垂直方向 .box{ display:...

    css的核心内容 标准流、盒子模型、浮动、定位等分析

    1、块级元素：如：&lt;div&gt;...我的未来不是梦&lt;/div&gt;&lt;span id=st class=style1&gt;栏目一&lt;/span&gt;&lt;span class=style2&gt;栏目二&lt;/span&gt;&lt;br&gt;阳光男孩&lt;/span&gt;&lt;span class=style3&gt;栏目三以上是标签的一个排列方式，以下是网页内容的呈

    图片预览器

    参数homogeneous是用来控制是否盒子中的每个组件都有同样的大小（例如水平盒子中的控件有同样的宽度，垂直盒子中的控件有同样的高度）。Spacing参数是组件之间的间隔。 垂直盒子的创建函数是gtk_vbox_new（），定义...

    CSS3样式表- 定位.pptx

    单元二 CSS3样式表网计技页术设任务七 定位31绝对定位浮动2相对定位盒子的浮动在标准流中，一个块级(block)元素在水平方向上会自动伸展，直到其父元素的边界；而在垂直方向上和兄弟元素依次排列，不能并排。CSS中的...

    《CSS设计彻底研究》光盘源码

    第7章　竖直排列的导航菜单　 第8章　水平导航菜单　 第9章　下拉菜单　 第10章　表格也精彩　 第 11章　圆角设计　 第12章　应用Spry制作高级网页组件　 第13章　固定宽度布局剖析与制作　 第14章　变宽度网页布局...

    css设计彻底研究 源代码

    　…… 第6章　链接与导航　第7章　竖直排列的导航菜单　第8章　水平导航菜单　第9章　下拉菜单　第10章　表格也精彩　第11章　圆角设计　第12章　应用Spry制作高级网页组件　第13章　固定宽度布局剖析与制作　第14...

    CSS inline-block属性概述及其使用示例

    Inline-block是元素display属性的一个值。这个名字的由来是因为，可以简单的... 行内元素（inline elements）排列方式是水平排列。行内块元素（inline-block elements）在内部他的表现类似block元素，比如他拥有bloc

    H5+CSS3.zip

    ...语义化标签：段落标签，标签自定义文字样式，标题标签，块，标签定义头部，标签定义底部，标签定义正文区段，标签定义侧边栏区域；...已知宽高实现盒子水平垂直居中； 不知宽高实现盒子水平垂直居中。

    sudoku:使用python的数独的个人版本，可用于数独传统游戏的所有版本

    每个盒子都是3x3的正方形排列。 每个游戏都有3x3的盒子排列。 每个垂直列不能在同一列中两次保留相同的编号。 每个水平行不能在同一行中两次保留相同的数字。 一个数字只能在一个框内的每个正方形中出现一次，...

    《CSS设计彻底研究》【中文PDF＋源代码】

    第7章　竖直排列的导航菜单 第8章　水平导航菜单 第9章　下拉菜单 第10章　表格也精彩 第11章　圆角设计 第12章　应用Spry制作高级网页组件 第13章　固定宽度布局剖析与制作 第14章　变宽度网页布局剖析与...

    基础的CSS3弹性盒Flexbox布局使用实例

    flexbox是一个新的盒子模型，当你给一个元素使用了flexbox模块，那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。flexbox有许多很好用的地方...

    JS-Swiper:使用原生JS实现的无缝轮播图

    图片列表里的图片是水平排列float: left;的 points-list里的point数量等于需要轮播的图片的数量 每次轮播时会根据此时播放的图片，给对应的point添\u52a0class='active' 可以根据需要给active添加样式 JS部分 封装了...

    flex弹性布局用法笔记

    flex弹性布局display:flex介绍1.flex-direction:row|row-reverse|column|column-reverse|initial|inherit (盒子排列方向)2.flex-wrap: nowrap|wrap|wrap-reverse(拆行或拆列)附加：flex-flow（1，2的结合写法）3....

    Flex布局

    传统的布局方案主要基于CSS盒子模型，依赖Display、Position、Float等属性。但是它对于一些特殊布局非常不方便，比如水平垂直居中。传统方式实现起来非常繁杂，各种黑科技，比如以下是一种水平垂直居中的实现方式： ...

    flex布局Flex实现常见布局的汇总

    然后其所有的直接子元素就变成flex子元素了，在flex里存在两根轴，叫主轴和交叉轴，互相垂直，主轴默认水平，flex子元素默认会沿主轴排列，可以控制flex子元素在主轴上伸缩，主轴方向可以设置，相关的css属性分为两...

    基于原生html+css实现仿微信电脑客户端页面源码+项目说明.zip

    1.项目代码均经过功能验证ok，确保稳定可靠运行。欢迎下载体验！下载完使用问题请私信沟通。...* 通过flex布局实现：是新的布局方式，不管是水平还是垂直排列，都能较好控制，可用flex布局取代浮动。

    drag-layout:基于React，可拖拽修改页面布局的插件

    拖动布局 ... boxSource array 要排列的盒子的数据源 [ { id , title , width , height , top , left , render } ] id , title width , 1 ～12 代表格数， 整个宽包括12个格和11个固定margin hei

Magicbox
Global site tag (gtag.js) - Google Analytics