在IE中浮动div问题 [英] Floating div issue in IE

问题描述

继续 https://stackoverflow.com/questions/8990246/frame-like -in-html / 8990407＃8990407 我在JSP中实现了浮动div。它在firefox中正常工作，但不在IE中

这就是我如何放置div

 < div id =div2> 
< font class ='passageNumber'>第二段< / font> 
< font class ='passageText'> 
< center> 
< font class ='title'> Millie 
希望是什么？ 
< / font> 
< / center> 
< br /> 
 
 TEST PASSAGE 
  
< / div> 
  

我使用的CSS是

 ＃div2，＃div3 {
 overflow：auto; 
 float：left; 
 height：450px; 
} 
 
 
 
 
＃div2 {
 display：inline-block; 
宽度：50％; 
} 
 
＃div3 {
 display：inline-block; 
宽度：50％; 
 
 
  

U可以在附加图片中看到allignment

鉴于firefox中的工作正常。 p>

，但在IE中，第二段文本会下来，如果段落很大，则双滚动条会显示。请帮忙解决方案不要为你做这项工作，但我建议使用与当前标准有更好联系的HTML和趋势，以提供更稳固和稳定的解决方案。

我首先构建 div ，它将包含所有内容您将浮动，然后将这些元素添加到该元素中，并对这些元素使用适当的标记：

 < div id = DIV2 > 
< div class ='heading'> Passage II< / div> 
< div class ='passageText'> 
 
< div class ='title'> Millie希望什么？< / div> 
< p> TEST PASSAGE< / p> 
 
< / div> 
< / div> 
  

...以及您的CSS我可能会尝试：

  .div2 
 {
 float：left; 
 width：400px; 
 height：300px; 
} 
 
 .heading 
 {
 font-size：larger; 
 font-weight：bold; 
} 
 
 .passageText 
 {
 font-family：Arial，sans-serif; 
} 
 
 .title 
 {
 text-align：center; 
} 
  

只要保持整洁，相关并且构造良好，你应该躲开这些烦恼相当成功 - 大部分时间！希望这有助于......

编辑：

p>如果你无法控制HTML，而且它只是格式化的，我也可以尝试在样式表中添加 display：block; attribute / value到使其表现得更像一个 div 元素。通常，使用您提供的代码，这些元素的块级显示根本不会破坏结构：

 字体
 {
 display：block; 
} 
  

我会试着看看我是否可以将这个HTML整理好！ / p>

Further to https://stackoverflow.com/questions/8990246/frame-like-in-html/8990407#8990407 I implemented floating divs in my JSP. It works properly in firefox but not in IE

This is how I placed the div

<div id="div2">
    <font class='passageNumber'>Passage II</font>
    <font class='passageText'>
        <center>
            <font class='title'>What does Millie
                hope for?
            </font>
        </center>
<br />

TEST PASSAGE
</font>
</div>

The CSS i used is

#div2, #div3 {
    overflow: auto;
    float: left;
    height: 450px;
}




#div2{
    display:inline-block;
    width: 50%;
}

#div3 {
    display:inline-block;
    width: 50%;

}

U can see the allignment in the attached image

Whereas the same works fine in firefox.

but in IE the "passage II" text comes down and if the passage is big, double scroll bar is appearning. Please help

解决方案

Not to do the work for you, but I'd suggest using HTML which has a better connection with current standards and trends to provide a more solid and stable solution.

I'd first construct the div which would contain everything that you'd float, then add the elements into that, using appropriate mark-up for those elements:

<div id="div2">
    <div class='heading'>Passage II</div>
    <div class='passageText'>

        <div class='title'>What does Millie hope for?</div>
        <p>TEST PASSAGE</p>

    </div>
</div>

...and for your CSS I might try:

.div2
{
    float: left;
    width: 400px;
    height: 300px;
}

.heading
{
    font-size: larger;
    font-weight: bold;
}

.passageText
{
    font-family: Arial, sans-serif;
}

.title
{
    text-align: center;
}

Just keep it neat, relevant and well constructed, and you should dodge these annoyances quite successfully - most of the time! Hope this helps...

EDIT:

If you have no control over the HTML, and that's the way it's just formatted, I might also try adding the display: block; attribute / value to the style sheet to make it behave more like a div element. In general, with the code you provided, block-level displaying of those elements wouldn't ruin the structure at all:

font
{
    display: block;
}

I would try and see if I could maybe neaten up that HTML though!

这篇关于在IE中浮动div问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！