右の閉じるボタンの周りを流れる左のdivのテキストを取得する方法（IE8でも動作するように！）

Question

私は本当にこれを行う方法を知っていると思っていました。これについては、私はちょっとばかばかしい単純なケースに一致する答えを見ていない。

#examined-evidence { 
    z-index: 1000; 
    display: none; 
    position: absolute; 
    left: 25%; 
    top: 10%; 
    width: 50%; 
    height: 80%;  
    background-image: url('../assets/images/transparent_grey_tint.png'); 
    border: 1px solid #33ffff; 
    padding: 0px; 
    margin: 0px; 
} 

#examined-evidence.active { 
    display: inline-block; 
} 

#examined-evidence #examined-evidence-details { 
    background-color: #333333; 
} 

#examined-evidence #examined-evidence-details .heading { 
    padding: 0px; 
    float: left; 
    display: inline-block; 
} 

#examined-evidence #examined-evidence-details .heading p { 
    text-align: center; 
    padding: 3px 12px 3px 12px; 
    display: inline-block; 
    font-size: 0.75em; 
    color: white; 
    margin: 0px; 
} 

#examined-evidence #examined-evidence-image { 
    text-align: center; 
    margin: 0px auto; 
    height: 80%; 
    width: auto;  
} 

#examined-evidence #examined-evidence-image img { 
    height: 80%; 
} 

#examined-evidence-close-button { 
    background-color: red; 
    display: inline-block; 
    float: right; 
    height: 34px; 
    width: 34px; 
    margin: 0px; 
    padding: 0px; 
} 
.clear { 
    clear: both; 
} 

...しかし、ブロックをインライン化するほとんどすべてを設定するにもかかわらず、閉じるボタンのdivがまだ、テキストのdiv BELOW表示されます。

<div id="examined-evidence"> 
    <div id="examined-evidence-details"> 
     <div class="heading"><p>I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.</p></div> 
     <div id="examined-evidence-close-button" class="button"></div> 
     <div class="clear"></div> 
    </div> 
</div> 

そして、ここでは、CSSです：ここでは
は、HTMLですIEとChromeで （ちょっと参考に、img srcはjavascriptから設定されていますので、心配しないでください）

誰かがアイデアを持っているなら、私はこのウェブページを誰かに見せたくありません。今回私は何が壊れましたか？

Answer 1

あなたの余白を調整し、p要素内のインラインスパンにあなたの閉じるボタンを削除して、あなたはすべてのセットする必要があります：私はIE <9を使用して停止しました

 #examined-evidence { 
 
     z-index: 1000; 
 
     position: absolute; 
 
     left: 25%; 
 
     top: 10%; 
 
     width: 50%; 
 
     height: 80%; 
 
     background: dimGray; 
 
     border: 1px solid #33ffff; 
 
     padding: 0px; 
 
     margin: 0px; 
 
     } 
 

 
     #examined-evidence.active { 
 
     display: inline-block; 
 
     } 
 

 
     #examined-evidence #examined-evidence-details { 
 
     background-color: #333333; 
 
     } 
 

 
     #examined-evidence #examined-evidence-details .heading { 
 
     padding: 0px; 
 
     float: left; 
 
     display: inline-block; 
 
     } 
 

 
     #examined-evidence #examined-evidence-details .heading p { 
 
     text-align: justify; 
 
     padding: 3px 12px 3px 12px; 
 
     display: inline-block; 
 
     font-size: 0.75em; 
 
     position: relative; 
 
     width: 100%; 
 
     color: white; 
 
     margin: 0px; 
 
     } 
 

 
     #examined-evidence #examined-evidence-image { 
 
     text-align: center; 
 
     margin: 0px auto; 
 
     height: 80%; 
 
     width: auto; 
 
     } 
 

 
     #examined-evidence #examined-evidence-image img { 
 
     height: 80%; 
 
     } 
 

 
     #examined-evidence-close-button { 
 
     background-color: red; 
 
     display: inline-block; 
 
     float: right; 
 
     height: 34px; 
 
     width: 34px; 
 
     padding: 0px; 
 
     position: relative; 
 
     margin: 0px 15px 10px 10px; 
 
     } 
 
     .clear { 
 
     clear: both; 
 
     }

<div id="examined-evidence"> 
 
     <div id="examined-evidence-details"> 
 
      <div class="heading"><p><span id="examined-evidence-close-button" class="button"></span>I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.</p></div> 
 
      <div class="clear"></div> 
 
     </div> 
 
    </div>