css浮动属性学习

在此文,

html菜单的基本制作-CSDN博客

 

已经看到css 浮动属性的效果;下面单独看一下浮动属性;

做4个div,设置不同的背景色,不为div添加float属性;效果如下;

因为div是块级元素,默认占据自己的行;

为每个div添加 float:left 属性后,效果如下;此属性使元素向左浮动,上一个块级元素如果没有占满一行,下一个块级元素会靠到上一个的左侧;

 

为每个div添加 float: right 属性,效果如下;下图是网页靠右侧的截图;

 

    元素向右浮动了;

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><meta charset="utf-8" /><style>#div1 {width:200px;height:100px;background-color:springgreen;float: right;}#div2 {width:200px;height:100px;background-color:red;float: right;}#div3 {width:200px;height:100px;background-color:blue;float: right;}#div4 {width:200px;height:100px;background-color:cyan;float: right;}</style></head>
<body><div id="div1"> </div><div id="div2"> </div><div id="div3"> </div><div id="div4"> </div></body>
</html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/233390.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Openstack Train安装】十三、创建实例

在先前的教程中&#xff0c;介绍了安装openstack及其相关组件的具体过程&#xff0c;本文介绍如何创建实例并完成访问。 在按照本教程操作之前&#xff0c;请确保完成以下配置&#xff1a; 【Openstack Train安装】一、虚拟机创建 【Openstack Train安装】二、NTP安装 【Op…

UG\NX二次开发 创建对象属性UF_ATTR_set_user_attribute

文章作者:里海 来源网站:里海NX二次开发3000例专栏 简介 创建对象属性UF_ATTR_set_user_attribute,这是一个新函数用于替代UF_ATTR_assign,旧版本NX是用UF_ATTR_assign函数创建、更新属性值,请参照这篇文章《UG\NX二次开发 创建对象属性UF_ATTR_assign》 下面是这个新函数…

虚幻学习笔记7—蓝图接口

一、前言 蓝图接口就是可以在蓝图中实现的接口&#xff0c;有它方便的地方&#xff0c;可以很方便的调用到实现了接口的函数。 二、实现 2.1、创建一个蓝图接口 1&#xff09;可以添加多个函数。 2&#xff09;函数在蓝图接口中只能规定输入和输出参数。 只有输入参数的可以…

什么是API? (应用程序编程接口)

我们经常听到 API 这个专业名称。那么什么是 API 呢&#xff1f; 定义 API&#xff08;Application Programming Interface&#xff0c;应用程序接口&#xff09;是一些预先定义的函数&#xff0c;或指软件系统不同组成部分衔接的约定。目的是提供应用程序与开发人员基于某软…

Linux实现类似cp的命令

1.利用主函数的三个函数进行传参 1).主函数的三个参数的含义: argc:主函数的参数个数 argv:主函数的参数内容 envp:环境变量; 2).演示代码: #include <stdio.h> #include <stdlib.h> #include <unistd.h> int main(int argc,char *argv[],char *envp[]…

《微信小程序开发从入门到实战》学习三十七

4.2 云开发JSON数据库 4.2.8 分页查询 在计算机互联网时代&#xff0c;很多页面底部分页导航按钮&#xff0c;有首页、上一页、第一页、第二页、尾页。 分页查询是指根据页码将每一页的数据查询出来。 在移动互联网时代&#xff0c;网页和应用都对网页进行优化&#xff0c;…

C/C++ Zlib库封装MyZip压缩类

Zlib是一个开源的数据压缩库&#xff0c;提供了一种通用的数据压缩和解压缩算法。它最初由Jean-Loup Gailly和Mark Adler开发&#xff0c;旨在成为一个高效、轻量级的压缩库&#xff0c;其被广泛应用于许多领域&#xff0c;包括网络通信、文件压缩、数据库系统等。其压缩算法是…

搜维尔科技:Varjo XR-4 系列-专为极致沉浸感而打造!

Varjo 的新一代头显将世界上最先进的混合现实技术与顶尖的图形处理能力连接起来&#xff0c;满足最高级别的视觉保真度和沉浸感至关重要的工业用例。 光学设计的根本性突破 体验全新的沉浸感。大幅扩展的视野&#xff0c;跨越 120 x 105 度&#xff0c;打破了受人尊敬的“全双眼…

最新消息:滴滴 P0 事故原因,原因出来了

最新消息滴滴P0故障原因&#xff0c;是由于k8s集群升级导致的&#xff0c;后面又进行版本回退&#xff0c;由于现在大型互联网公司基本都是基于K8s进行部署的&#xff0c;如果K8s集群一出问题&#xff0c;上面运行的业务Pod和运维系统全部都得宕机&#xff0c;导致没法回滚。 …

8个最流行的Revit插件【2023-2024】

NSDT工具推荐&#xff1a; Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 Revit 已取代 AutoCAD 成为全球行业标准软件。 随着设计复杂性的增加&#xff0c;近年来插件变得更加必要。 热…

极智芯 | 解读国产AI算力 登临产品矩阵

欢迎关注我的公众号 [极智视界],获取我的更多经验分享 大家好,我是极智视界,本文分享一下 解读国产AI算力 登临产品矩阵。 邀您加入我的知识星球「极智视界」,星球内有超多好玩的项目实战源码和资源下载,链接:https://t.zsxq.com/0aiNxERDq 登临属于 GPGPU 阵营,同属于…

「Qt Widget中文示例指南」如何创建一个计算器?(二)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 本文将展示如何使用…