发表新帖
发表新帖

IE7 float right problems

前端 未结
关注
3 1721
死守一世寂寞
死守一世寂寞 2020-12-07 09:47

Html=>
相关标签:
3条回答
  • Happy的楠姐
    2020-12-07 10:17

    Always helpfull for all IE-Float-Combos: Give every float-element a display: inline;

    0 讨论(0)
  • 情话喂你
    2020-12-07 10:22

    You need to float both elements and clear it.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#" style="float:left;">foo</a>            
    <div style="clear:both;"></div>
  </div>
something
</body>
</html>

    Or simply put the floating element in front of the normal element like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#">foo</a>            
  </div>
something
</body>
</html>

    Brief Explanation:

    Pardon my english and drawing, but here's briefly how float and clearing works in cross browser:

    An element can be floated left or right. When you have element floating, the element doesn't push "normal" content downwards. See why -

    Float and clear:

    alt text
    Legend: Orange/Float Right, Blue/Float Left, Gray Lines/Clear divider, Red Rect/bounds

    In this case, you have 2 elements of one line text - one float left, and the other float right. When floating, it will not push the contents downwards aka taking space. Thus if you do not use clear:both at the gray lines, the contents below will stack upwards between the 2 floating elements and thus may not be what you want.

    When you use clear:both below the floats, the content below the floats will be pushed as far as whichever float element is of highest height. This is shown in the diagram's 2nd and 3rd section.

    Float only:

    alt text
    Legend: Orange/Float Right, Blue/Normal content, Gray Lines/the line that is divded with the next, Red Rect/bounds

    The blue normal content is already by default text-align: left;. Thus it is left oriented. You need the float to be in front of the normal content because you're telling the browser to float from this line.

    You should experiment different conditions to see its effect: putting float in front, behind, float left right, clear both, clear right and left.

    0 讨论(0)
  • 温柔的废话
    2020-12-07 10:43

    Try the clear after fix:

    div:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
    0 讨论(0)
 看不清?
提交回复
热议问题