子元素div高宽比不确定性时父div高宽比怎样自融

日期:2020-10-22 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

在最外层div加下列款式

height:100%;
overflow:hidden;

其它方式:

Div即父器皿不依据內容自融入高宽比,大家看下面的编码:

拷贝编码
编码以下:

<div id="main">
<div id="content"></div>
</div>

当Content內容多时,即便main设定了高宽比100%或auto。在不一样访问器下還是不可以完好无损的全自动屈伸。內容的高宽比较为高了,但器皿main的高宽比還是不可以撑开。

大家能够根据3种方式来处理这个难题 
1提升1个消除波动,让父器皿了解高宽比。请留意,消除波动的器皿中有1个空格。

拷贝编码
编码以下:

<div id="main">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>

2提升1个器皿,在编码中存在,但在视觉效果中不能见。

拷贝编码
编码以下:

<div id="main">
<div id="content"></div>
<div style="height:1px; margin-top:⑴px;clear: both;overflow:hidden;"></div>
</div>

3提升1个BR并设定款式为clear:both。

拷贝编码
编码以下:

<div id="main">
<div id="content"></div>
<br style="clear:both;" />
</div>

填补:

拷贝编码
编码以下:

<div id="main">
<div id="content">
<p>demo1</p>
<p>demo2</p>
<p>demo3</p>
</div>
</div>
#main { border:1px solid #999999; background-color:#CCCCCC; height:100%; overflow:hidden;}
#content { float:left;}

以上3个方式都并不是最好是的处理方式,由于在程序流程编码意识中是倡导尽可能不必加上不经意义的标识编码