div中内嵌并排div的显示问题

 在页面布局中，最常使用的就是div标签，经常会出现div中内嵌div的情形，这时，子div的排列就相当重要。下面推荐两种方式。

1. 当需要两个div并排显示，并拥有同一个父div时：

<div style="width: 500px; height: 300px; background-color: red;"><div style="width: 250px; height: 150px; display: inline-block; background-color: green;"></div><div style="width: 250px; height: 150px; background-color: grey; display: inline-block; margin-left: 0;"></div>
</div>

此时页面显示为：

div之间默认有个间隔。需要把子div的总长度减少才能在一排显示。
**

2. 使用float属性时：

<div style="width: 500px; height: 300px; background-color: red;"><div style="width: 250px; height: 150px; display: inline-block; background-color: green; float: left;"></div><div style="width: 250px; height: 150px; background-color: grey; display: inline-block; margin-left: 0; float: left;"></div>
</div>

此时页面显示为：

div之间没有间隔并且并排显示，但是此时脱离了文档流，即灰色div也必须要用float: left属性，不然就会覆盖绿色div。
**

3. 使用position属性：

<div style="width: 500px; height: 300px; background-color: red; position: relative;"><div style="width: 250px; height: 150px; display: inline-block; background-color: green;"></div><div style="width: 250px; height: 150px; background-color: grey; display: inline-block; position: absolute;"></div>
</div>

这时能达到和图2同样的效果，原理也一样，position: absolute能使div脱离文档流。

4. 当我们在并排div中加标签时，若使用方式1：

<div style="width: 500px; height: 300px; background-color: red;"><div style="width: 250px; height: 150px; display: inline-block; background-color: green;"><div style="width: 100%; height: 75px; background-color: blue;"><span>div1</span></div><div style="width: 100%; height: 75px; background-color: pink;"><span>div2</span></div></div><div style="width: 240px; height: 150px; background-color: grey; display: inline-block;"><span>div3</span></div>
</div>

如图3所示：

此时就会破坏div布局。

因此，在布局子div中，要使用方式2和方式3，即float或者position属性。

div中内嵌并排div的显示问题相关推荐

div内嵌p,div等块元素出现的问题
div内嵌p,div等块元素出现的问题 http://caiceclb.iteye.com/blog/428085 div内部块级元素,比如p,div,设置外间距(margin)的话会怎样.本来还纳闷 ...
css如何实现让div中的多行文字居中显示
标题css如何实现让div中的多行文字居中显示最近在做项目的时候遇到一个div中有多行文字(可能一行也可能多行)需要实现居中显示,试了好多方法都不行,显然不能使用padding来居中,因为文字有多少 ...
mfc 内嵌本地html,MFC程序中内嵌网页,附示例工程
最近在课程设计,因为小悠太懒了,是在不想用C++完成一些简单的文件上传下载操作,于是就想着将网页内嵌到程序中,上传下载神马的就直接使用网页Web来完成就好了,本示例中将演示在MFC程序中内嵌一个htm ...
UNI-APP在自定义组件中内嵌H5/Html网页，可自定义webview大小，加载不闪屏
问题描述: UNI-APP在自定义组件中内嵌H5/Html网页时,通过内置组件 web-view 实现(如下),发现会自动铺满整个页面,不可控制大小(默认充满屏幕不可控制大小) <web-vie ...
linux c语言编程内嵌汇编,gcc编译c语言中内嵌汇编
gcc编译c语言中内嵌汇编 --AT&T and Intel 汇编语法对照寄存器命名: AT&T: %eax Intel: eax AT&T 语法源地址在左侧,目的地址在右 ...
梯形图 c语言代码生成,PLC梯形图中内嵌C语言编程的实现
针对现有梯形图语言适合实现逻辑控制而不适合实现复杂算法这一问题,从基于构件技术的梯形图实现原理出发,对构件的属性定义以及编译方法进行了分析,提出了一种PLC梯形图内嵌C语言实现混合编程的方法,并在CA ...
C语言中内嵌汇编asm语法
这篇文章写得炒鸡详细而且很全面,易于理解,建议新手查看 C语言中内嵌汇编asm语法下面这两篇文章作为补充来看 C语言内嵌汇编:asm volatile C语言ASM汇编内嵌语法
记一次定位解决SpringBoot中内嵌Tomcat的Bug问题
你知道的越多,不知道的就越多,业余的像一棵小草! 你来,我们一起精进!你不来,我和你的竞争对手一起精进! 编辑:业余草 segmentfault.com/a/1190000038760707 推荐:h ...
vs2015c语言内嵌汇编,C#中内嵌资源的读取
起因作为一个从Cpper转到C#并且直接从事WPF开发的萌新来说,正式编码过程中碰到了不少问题,一路上磕磕碰碰的.因为软件设计需求上的要求,需要将一些配置文件(XML.INI等)内嵌到程序中,等需要 ...