如何讓左邊的div中的文字在右邊的關閉按鈕周圍流動（在IE8中工作！）

Question

我真的認爲我知道如何做到這一點，而且我知道有很多問題關於這個，但我還沒有看到一個與我的荒唐簡單的案例相匹配的答案。
這裏的HTML：

<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：

#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仍然顯示下面的文字格，在IE和Chrome中。 （僅供參考，img src從javascript設置，請不要擔心這一點。）

如果任何人有任何想法，我很想顯示這個網頁誰是老闆。這次我搞砸了什麼？

Answer 1

放下你的關閉按鈕到p元素內內嵌跨度，調整你的利潤，你應該準備就緒：

 #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>