精华内容
下载资源
问答
  • CSS div float

    千次阅读 2007-12-06 00:38:00
    CSS float属性 CSS div floatThe float property sets where an image or a text will appear in another element.float属性可设置在另一个元素中的图片或是一段文字在哪出现。Note: If there is too little space ...

    CSS float属性 CSS div float

    The float property sets where an image or a text will appear in another element.
    float属性可设置在另一个元素中的图片或是一段文字在哪出现。

    Note: If there is too little space on a line for the floating element, it will jump down on the next line, and continue until a line has enough space.
    注意:如果在一行空间上的浮动元素过多,超出了空间的容纳范围,它就会自动跳到下一行中,直到一行有足够的空间容纳它。

    Note: Content, background, and borders of inline elements should go in front of the float. Background and borders of a block element should go behind the float, but the content of the block element should go in front of the float.
    注意:在inline元素中的内容,背景以及边框会在浮动层的上面。block元素的背景边框则会在浮动层的下面,而内容会在其上面。

    Inherited: No
    继承性:无

    Example
    举例
    img
    {
    float: left
    }
    Possible Values
    可能用到的值
    Value
    描述
    left
    The image or text moves to the left in the parent element
    图片或是文字移动到父层的左边
    right
    The image or text moves to the right in the parent element
    图片或是文字移动到父层的右边
    none
    The image or the text will be displayed just where it occurs in the text
    图片或是文字回到它本应该出现的位置
     
    展开全文
  • 在用CSS+DIV的布局中,经常会发现,当一个DIV float之后,如果他的高度超过了其父DIV的高度时,其父DIV的高度并不会相应的进行调整。要解决这个问题(也叫做闭合(清除)浮动),我们有四种办法: 1. 额外标签法 ...

    在用CSS+DIV的布局中,经常会发现,当一个DIV float之后,如果他的高度超过了其父DIV的高度时,其父DIV的高度并不会相应的进行调整。要解决这个问题(也叫做闭合(清除)浮动),我们有四种办法:

    1. 额外标签法

    这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签。我个人比较喜欢这种方法,因为它简单、实用、浏览器兼容性好,而且这种方法也是W3C推荐的方法

    <div style="clear:both;"></div>

           或者使用

    <br style="clear:both;" />

    2. 使用after伪类

    这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证html比较干净。

     #outer:after
    {
       content:".";
       height:0;
       visibility:hidden;
       display:block;
       clear:both;
    }

    3. 设置overflow为hidden或者auto

    这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素。不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面。

     #outer 
     {
        overflow:auto;
       zoom:1;
    }

    overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决。

    4. 浮动外部元素,float-in-float

    这种做法就是让父容器也浮动,这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果,但缺点也很明显——父容器未必想浮动就浮动的了,毕竟浮动是一种比较特殊的行为,有时布局不允许其浮动也很正常。

    看一下自己代码的例子吧:

    <div style="overflow: auto;">
    <s:iterator value="lstProductPicture" id="productPicture">
    <div style="float:left;">
    <img
    src="../dms/get.html?path=<s:property value="#productPicture.path" />"
    alt="" style="display: inline-block; width: 93px; height: 90px" /> <br></br>
    <input type="button" value="删除" οnclick="delpicture('${productInfo.id }', '${productPicture.path }');"/>
    </div>

    </s:iterator>
     </div>

    里面迭代会出现很多div 里面的div会向左浮动,因而是父div的高度无法自适应问题的出现。

       






    展开全文
  • 如何修正DIV float之后导致的外部容器不能撑开的问题  在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有...

    如何修正DIV float之后导致的外部容器不能撑开的问题  

    在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子:

    HTML4STRICT代码:

    1. <div style="width:200px;border:1px solid red;">

      1. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

      2. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

      3. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

      4. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

      5. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

    2. </div>

    显示的结果如下:

    P_1160709253_0.gif

    容器DIV没有被撑开

    大家可以看到,作为外部容器的边框为红色的DIV,没有被撑开。这是因为内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。

    我们想让外部容器的DIV随着内部DIV增多而增加高度,要怎么解决呢?

    以前我都是用这样的方法来解决:

    HTML4STRICT代码:

    1. <div style="width:200px;border:1px solid red;">

      1. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

      2. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

      3. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

      4. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

      5. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

      6. <div style="clear:both;"></div>

    2. </div>

    显示的结果如下:

    P_1160709321_0.gif

    显示正常了

    我们看到,在容器DIV内要显示出来的float:left的所有的DIV之后,我们添加了这样的一个DIV:<div style="clear:both"></div>  。这样,其实就在最后增加了clear的动作。

    但是,我总觉得,这么多加一个DIV有点不妥。一是多了一个没有意义的DIV,二是在用dojo做Drag & Drop的时候,由于这个DIV是容器DIV的一个字节点,如果这个节点被移动,则会造成排版上的Bug:如果要显示的蓝框的DIV被移到这个DIV之后,则因为clear:both,它会被强制换一行显示。所以,我一直在寻找更好的解决办法。

    昨天在无数次的询问了Google大仙后,我终于找到了How To Clear Floats Without Structural Markup 这篇文章,找到了解决的办法。

    首先设置这样的CSS:

    CSS代码:

    1. .clearfix:after {

    2. content: ".";

    3. display: block;

    4. height: 0;

    5. clear: both;

    6. visibility: hidden;

    7. }

    然后,我们再修改原来的HTML代码,让外部的容器DIV来使用这个CSS:

    HTML4STRICT代码:

    <div style="width:200px;border:1px solid red;" class="clearfix">

    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

    </div>

    在 Firefox里测试一下,哈哈,这样做的确很有效,显示正常,而且dojo的 Drag & Drop 也不会有问题了。原来,这个clearfix的CSS使用了after这个伪对象,它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为隐藏。这样就达到了撑开容器的目的啦。

    但是,在文章中说,Windows IE并不支持这样做。所以要让IE也完美显示,则必须在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。CSS如下:

    CSS代码:

    1. .clearfix:after {

    2. content: ".";

    3. display: block;

    4. height: 0;

    5. clear: both;

    6. visibility: hidden;

    7. }

    8. /* Hides from IE-mac \*/

    9. * html .clearfix {height: 1%;}

    10. /* End hide from IE-mac */

    因为转义字符"\",Mac IE浏览器会忽略掉这段Hack,但Windows IE不会,它会应用 * html .clearfix {height: 1%;} 来达到撑开DIV容器的目的(貌似Mac IE没有办法解决这个问题,不过幸好用户数量是在是太少了,Safari支持就可以了:p)。

    测试一下,果然大功告成。

    P_1160709321_0.gif

    转自:http://ig2net.info/archives/94.html


    ====================================================================


    法二:

    刚入门网站设计布局的开发者肯定会碰到这样的问题,那就是当子容器全部浮动的时候,父容器的高度不能自动撑开。在我们没有为富容器设置边框或背景的时候是看不到这个问题的,如下的代码。

    <div style="background: #F99; width: 400px; border: 1px solid #3CF;"> <div style="float: left; background: #36F; width: 180px; height: 180px;">I'm a son container .</div> <div style="float: left; background: #F60; width: 180px; height: 180px;">I'm the other son container .</div> </div>

    运行后,大多数的人会觉得很明显,这就是一个父容器包裹着两个子容器,但其实没有那么简单,父容器的高度会显示为0,你能看到的只是父容器的边框,而高度并没有被内部的两个子容器的高度撑开。这个时候如果我们为父容器设置背景将不会被显示。
    解决的方法其实比较简单,那就是给父容器增加一个属性,overflow:hidden。
    另外一个有效的方法就是在所有的子元素闭合标签后增加一个

    <div style="clear:both;"></div> 

    来清除浮动。这也是一个比较好的做法,通常用在父容器需要设置固定高度的时候,但是又怕内容太多由于设置了overflow而不能显示。这两种方法都是有效的,大家可以在实践中测试。

    转自:http://liangsandian.com/a/div-can-not-auto-expand/


    法三:


    给父容器增加属性:display:table,个人常用的方法

    展开全文
  • 用clear:both解决 &lt;div style="float"&gt;&lt;/div&gt; &lt;div style="clear:both"&gt;&lt;/div&gt;  

    用clear:both解决

    <div style="float"></div>
    <div style="clear:both"></div>

     

    展开全文
  • 学习div float 在ff和ie下的布局区别

    千次阅读 2008-12-05 00:00:00
    作者:miyiyi[at]gmail[点]com来源:http://www.blabla.cn/html_ref/firefox_ie_diff01.html时间:2006-12-20基本HTML代码 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Div Float Samplediv { ...
  • div { float: left; width: 100px; border: solid 1px Blue;background-color:Red; } <div style="width:204px;border-color:Black;background-color:White;"> <div style="height: 50px;"> </div> ...
  • div{float:left;} 内容多 内容少 内容多 内容多多 内容少少 内容少 解决方法,在所有div外面套个div,然后把overflow设置为hidden,并对内部div设置margin-bottom:-10000px;padding-bottom:10000px; #main{
  • 这是在CSS中的.export下加入float:left以后会使随后跟上的BUTTON标签跟在DIV后面,这是就须在两者之间加入一个CLASS为clear(可以自己起名字)的DIV,如下图所示: <div runat="server" class="export">请不要直接...
  • CSS div float IE和FireFox的兼容性问题

    千次阅读 2008-05-22 13:45:00
    在IE中,只有指定该DIV的CLASS为FLOAT:left 才会有FLOAT属性而在FF中,第一个指定后 其后的div也随着平移,所以可以在同级的float加上.clear{ clear:both;} , CSS中 height: 19px !important; height: 21px; 在IE...
  • 在外部的div的style中添加 overflow:hidden;  对overflow:hidden的详细理解: overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义...
  • 在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子:HTML4STRICT代码TEST ...
  • 我们看到,在容器DIV内要显示出来的float:left的所有的DIV之后,我们添加了这样的一个DIV: <div style="clear:both"></div>  。这样,其实就在最后增加了clear的动作。 但是,我总觉得,这么多加一个DIV有点不妥。...
  • 在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子: HTML4STRICT代码: ...
  • Div使用Float后如何撑开父Div

    千次阅读 2012-02-08 18:08:35
    一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开,如下图: 部分代码如下: ...3 #div2,#div3{float:right;border:1px solid blue;} 4 style> 5 6 div id="div1"> 7 div
  • Div使用Float后撑开父Div的几种方法

    千次阅读 2018-01-29 20:42:03
    一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开,如下图:    部分代码如下:  ...#div2,#div3{float:right;border:1px solid blue;}      two  one   
  • css多个div float并排,高度都自适应(自增) 采用 Div + CSS 进行三列或二列布局时,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充...
  • divfloat垂直居中span

    2020-07-06 11:37:26
    divfloat垂直居中span <div style="height: 100px;float: left;"> <div style="height: 100px;vertical-align: middle;display: table-cell;"> <span>测试</span> </div> </...
  • div设置float之后,如果没有清除,则下一个被设置floatdiv会根据上一个floatdiv的布局进行排版;而下一个没设置float属性的div则是根据它的前一个元素进行排版。 要清除float属性,只能使用style=”clear:both”...
  • div如果不设置float属性时,宽度为默认父级容器的宽度,但是设置float:left后, div的宽度就会变为他里面内容的实际宽度,没明白是为什么? 求教
  • div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如:标签盒子、标签、标签、标签等html标签)的浮动布局,浮动也就是我们所说标签...
  • DIV浮动(float)后父DIV高度自动失效解决方案 如下所示,子元素div2 本身具有高度和宽度,但由于其具有float:left属性后,其父元素div1不具有高度。 <html> <head> </head> <body> ...
  • 终止 DIVfloat 属性,在 css 里面定义一个样式   .clear_float {  clear: both; }   页面使用时加上一行 后面的 div 将不再 float
  • 前言本人在项目中遇到显示user列表信息时需要显示如下图所示的效果,因此学习了css样式中overf和float的简单使用。 需求描述:如何把一个单元的内容信息显示在一行,并且可以控制一行有几个单元。一个例子<div ...
  • div中的float属性设置right值,那么div中的元素是向右浮动, 但是好像整个div框在父一级容器中也会向右浮动, 那么div中的float属性是影响到div本身还是其中的元素呢?
  • div使用float后撑不开父div的问题  2011-04-16 12:21:19| 分类: CSS | 标签:div height 撑开 ie6 auto |举报|字号 订阅 子div使用float后不撑开父div的问题。  方法出处,但是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 230,807
精华内容 92,322
关键字:

divfloat