`

盒子水平排列

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>
 
分享到：
| 子盒子居中
评论
发表评论

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

相关推荐

    09学院门户网站.pdf

    浮动是 CSS 布局的三种机制之一，用于让多个块级盒子水平排列成一行。浮动可以让盒子从普通流中浮起来，使得浮动成为布局的重要手段。 浮动的概念是指元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，...

    CSS盒子模型的应用

    - **盒模型与浮动元素**：在使用float属性时，盒子模型可以帮助我们控制元素间的间距和排列。 - **盒模型与定位**：在使用position属性（如absolute或fixed）时，盒子模型可以帮助我们精确地定位元素。 **5. 盒阴影...

    java gui 盒子布局实列

    `BoxLayout`是Java Swing提供的一种布局管理器，它允许我们将组件沿指定轴线进行排列，比如水平方向（X轴）或垂直方向（Y轴）。这种布局类似于HTML的`&lt;div&gt;`元素，可以将组件像盒子一样堆叠起来。在Java中，`...

    selectDeviceContainer弹性布局第二行盒子充满了.zip

    【标题】"selectDeviceContainer弹性布局第二行盒子充满了"是一个关于前端开发中使用弹性布局（Flexbox）实现特定布局模式的实践案例。在这一场景下，开发者可能面临一个需求，即让容器内的元素在第二行时能完全填...

    高仿小米盒子UI效果实现

    - **LinearLayout**：适用于简单的垂直或水平排列的组件。 - **RelativeLayout**：允许组件之间相对定位，适合更复杂的布局需求。 - **ConstraintLayout**：最新的布局管理器，支持多方向约束，可创建更灵活的...

    python tkinter-08-盒子模型.ev4.rar

    `Grid`通过行和列来组织控件，而`Pack`则按照方向（水平或垂直）来排列控件。 例如，如果你想要一个按钮在窗口中居中，可以使用`pack`方法，并设置适当的`ipadx`、`ipady`、`padx`和`pady`值，以及`side`属性来指定...

    flex弹性盒子布局实例

    3. 弹性项目（Flex Items）：flex容器的子元素，沿主轴排列。 二、Flexbox关键属性 1. `flex-direction`：定义主轴的方向，可设置为`row`（默认，从左到右）、`row-reverse`（从右到左）、`column`（从上到下）或`...

    CSS-day03.pdf

    浮动是 CSS 中的一种布局技术，用于实现网页元素的水平排列。浮动可以使元素在水平方向上排列，实现多个元素在同一行的显示。 定位（Position） 定位是 CSS 中的一种布局技术，用于实现网页元素的绝对或相对定位。...

    手机端滑动盒子效果

    通过CSS的`display: flex`或`grid`实现水平排列。 2. 固定定位：为了实现滑动效果，可能需要将容器设置为`position: relative`或`absolute`，确保滑动不会影响到其他元素。 3. 外部容器宽度：通常设置为视口宽度，...

    CSS-day04.pptx

    体验案例 —— div 水平排列 代码示例： ```css div { width: 200px; height: 200px; background-color: pink; float: left; } ``` 浮动小结： 我们使用浮动的核心目的 —— 让多个块级盒子在同一行显示。因为...

    CSS设计彻底研究

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

    MFC布局管理器

    1. **方向支持**：CBoxLayout允许用户选择布局方向，可以是水平（水平盒子布局）或垂直（垂直盒子布局）。 2. **添加控件**：用户可以通过添加成员函数将控件添加到布局中，这些控件会按照布局规则自动排列。 3. *...

    深入理解css盒子模型1

    CSS盒模型是网页布局的基础，理解它对于精确控制网页元素的外观至关重要。盒模型由四个主要部分组成：内容...通过熟练掌握这些基础知识，我们可以更好地控制元素的尺寸、间距和排列，从而实现精细化的网页设计。

    CSS基础知识-3.pdf

    外边距可以用来实现块级盒子的水平居中，但需要满足以下两个条件： 1. **指定宽度**：盒子需要有明确的宽度（width）。 2. **自动左右外边距**：盒子左右的外边距设置为`auto`。 对于行内元素或行内块元素，可以...

    详解CSS中的flex布局

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

    水平导航纯CSS模仿百度导航.zip

    2. **浮动布局**：早期的CSS布局常用浮动（float）来实现水平排列元素。在导航条中，可以将每个导航链接设为浮动元素，使其并排显示。 3. **清除浮动**：由于浮动可能导致父元素高度塌陷，因此通常需要使用`clear:...

    缺少一个盒子的游戏：您错过了此游戏中的一个盒子并解决了难题

    在这款游戏中，玩家面对的是一个16格的面板，其中15张图片碎片需要通过水平或垂直滑动来调整位置，目标是将它们排列成完整的一幅画面。这种游戏机制既考验玩家的空间想象力，又锻炼了他们的逻辑思维能力。 2. **两...

    css 水平导航

    设置`float: left`可以让元素向左浮动，从而实现水平排列。 4. 二级菜单：对于有二级菜单的导航，我们通常需要添加一些额外的CSS规则来控制显示和隐藏。可以使用`:hover`伪类来触发二级菜单的显示，当鼠标悬停在一...

    前端开发面试题整合（css、js、vue。react等）

    3. 实现盒子水平垂直都居中的有哪些实现方案？ 有三种方法可以实现盒子水平垂直都居中： * 使用 position + margin（只适用于子盒子有宽度和高度的时候） * 使用 position + transform（子盒子有或没有宽高的时候...

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