html 基本布局介绍

1、div默认是纵向排列的,例子如下:

<div id="wrap"><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div>
</div>

2、如果要div横向排列,用:float:left

#div1{float: left;
}
#div2 {float: right;
}
#div3 {float: right;
}

横向排列了,但是顺序错位了。

div2 和 div3,可以通过将它们再用一个 div 包起来的方法解决。

3、inline-block 行块标签

#div1, #div2, #div3{display: inline-block;
}

元素间会有空白。这个空白其实是空白符,因为 inline-block 会使元素在行内排列,也就是跟文字在一起排列,而我们源代码中 div 和 div 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符,所以就会出现缝隙 --------------------- 本文来自 love--baby 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/hunhun1122/article/details/78591103?utm_source=copy

参考文章:https://blog.csdn.net/hunhun1122/article/details/78591103

 

转载于:https://www.cnblogs.com/tiandi/p/9697433.html

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

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

相关文章

@JsonSerialize 使用:注解方式 实现条件判断属性值、条件修改属性值

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 数据库中是 1、0 记录性别。 预期效果为&#xff1a;当查到属性值为 1 时&#xff0c;就给序列化后的 json 中性别字段赋值为 “男”…

【Android开发】NDK开发(1)-Hello World!

上半年&#xff0c;公司的一个项目&#xff0c;本身我是不喜欢Android开发的&#xff0c;但是学习到的东西总需要整理一下。 从iOS转到Android&#xff0c;真心有些不习惯。就IDE来说&#xff0c;eclipse比Xcode差的不是一点半点。Android模拟器竟然还要开机&#xff01;我勒个…

jQuery 实现表格与 ckeckbox 的全选、单选功能

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 功能点 1. 用户点击头的checkbox时&#xff0c;所有表格数据行的checkbox全选或反选。 当数据行某一行没有选中时&#xff0c;头check…

VUE:checkbox 单选框(单选、多选)、一选全选 / 全选一选、表格单选列实现

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 效果&#xff1a;如红框中部分。 一选全选&#xff1a;表头上的单选框选中则下面每行都选中。 全选一选&#xff1a;表中数据每行都…

我爱学习第一天(委托)

---恢复内容开始--- 1.delegate 一般用法 delegate void WriteValue(string vale);//申明一个委托,参数是string类型,无返回值static void Main(string[] args){WriteValue write new WriteValue(WriteLine);//实例化委托write("喝水");//调用Console.ReadKey();}pu…

VUE:父子组件间传参、子组件传值给父组件、父组件传值给子组件

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 Vue是一个轻量级的渐进式框架&#xff0c;对于它的一些特性和优点在此就不做赘述&#xff0c;本篇文章主要来探讨一下Vue子父组件通信的…

c1科目三考试技巧

起步平稳。转向灯不要错了。靠边要和路边平行。离边近量保持&#xff1a;30CM距离。车子在运行中。换档尽量保持利落。若道路比较复杂。看好路牌路标&#xff0c;不要违规。一般很容易过的。你不要紧张。晚上夜考灯光把好。一切很顺利的。祝你好运。 方法/步骤 紧记着“一灯二…

Astyle 一键格式化项目代码

代码格式化差异问题&#xff1a; 一个团队有多个开发&#xff0c;因开发习惯不同&#xff0c;开发时少添加了空格、换行等。 格式化代码时&#xff0c;一般会将整个文档格式化&#xff0c;代码提交时会发现未知的修改项。 Astyle格式化工具 官网下载地址&#xff1a;Artistic S…

浅谈 JavaScript、ECMAScript (ES5、ES6)是什么、相互关系

一、ECMAScript 和 JavaScript 的关系 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 ES6 ECMAScript6 从百度百科的资料上来看&#xff1a; ECMAScript是一种由Ecma国际通过ECMA-…

CorelDRAW X7 X8 2017 2018是什么关系?

从CorelDRAW 2017版本开始我们叫习惯了的X几系列的CorelDRAW毅然决然的就换了称呼&#xff0c;所以有时候很多朋友对于软件版本&#xff0c;经常会傻傻分不清&#xff0c;还有人认为X8版本比2017版本高&#xff0c;究竟为什么会这么认为呢&#xff1f; “帮我转个X8吧”。 “我…

阮一峰 《ECMAScript 6 入门》:let 和 const 命令

以下内容全文出自 阮一峰的书&#xff1a; 《ECMAScript 6 入门》 电子版地址&#xff1a;ES 6标准入门&#xff08;第3版&#xff09; let 命令 基本用法 ES6 新增了let命令&#xff0c;用来声明变量。它的用法类似于var&#xff0c;但是所声明的变量&#xff0c;只在let命令…

离合器半联动

半联动即离合器半联动。 离合器半联动是指离合器不稳定联接的工作状态&#xff0c;即驾驶员踩离合器踏板&#xff0c;使离合器压板压力逐步减小&#xff0c;造成主动盘与从动盘之间处于边转边滑的状态。在场内驾驶考试时&#xff0c;驾驶员由于操作不熟练&#xff0c;不能在要求…

学习 cookie session 正向代理和反向代理的区别

1.学习网址&#xff1a;https://www.cnblogs.com/wxinyu/p/9154178.html 1.1 当我打开一个浏览器的时候&#xff0c;客户端有session id区分用户, 服务器有了session的浏览记录&#xff08;浏览器编号的txt&#xff09;.多个页面则多个session&#xff0c; 1.2 token就是令牌…

axios 发 post 请求,后端接收不到参数的解决方案

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 问题场景 场景很简单&#xff0c;就是一个正常 axios post 请求&#xff1a; axios({headers: {deviceCode: A95ZEF1-47B5-AC90BF3},me…

nginx+keepalived高可用性负载均衡

一、前言nginx进程基于于MasterSlave(worker)多进程模型&#xff0c;自 身具有非常稳定的子进程管理功能。在Master进程分配模式下&#xff0c;Master进程永远不进行业务处理&#xff0c;只是进行任务分发&#xff0c;从而达到Master进程的存 活高可靠性&#xff0c;Slave(work…

经典监督学习方法

生成算法尝试去找这个数据到底是怎么生成的&#xff08;产生的&#xff09;&#xff0c;然后再对一个信号进行分类。基于你的生成假设&#xff0c;哪个类别最有可能产生这个信号&#xff0c;这个信号就属于那个类别。 判别模型不关心数据是怎么生成的&#xff0c;它只关心信号之…

Ubuntu版本更新一路走来:朕就是这样的汉子

今日&#xff0c;Ubuntu发布了最新的14.04版本。当然&#xff0c;业界对新版Ubuntu褒贬不一&#xff0c;为此我们回顾了Ubuntu版本更新历史上几个比较有代表性的版本&#xff0c;看看Ubuntu这一路走来究竟有什么变化。Ubuntu刚刚发布了最新的14.04版本&#xff0c;围绕这一版本…

安装Ubuntu 14.04后要做的5件事情

Ubuntu最新版本Ubuntu 14.04已经发布&#xff0c;它是一个长期支持版本&#xff08;LTS&#xff09;&#xff0c;提供软件包和安全更新的服务周期为5年。本文为大家简单介绍了Ubuntu 14.04版本新特性和安装Ubuntu 14.04后需要做的5件事情&#xff0c;以供参考。Ubuntu目前是世界…

昨天,我的大学学习[2]

昨天&#xff0c;我的大学学习[2] 曾毅 谁能改变我的命运[大学二年级] 如果说大学一年级的时候是一种被动学习状态&#xff0c;对计算机科学不能揽其全貌&#xff0c;那么进入大学二年级以后的学习便是比较有针对性的了&#xff0c;但这种转变并非偶然&#xff0c;同样也是经过…

springboot 项目输出 sql 到控制台、 SpringBoot 中 Mybatis 打印 sql

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 SpringBoot中Mybatis打印sql 如果使用的是 application.properties 文件&#xff0c;加入如下配置&#xff1a; logging.level.com.ex…