오른쪽에있는 닫기 버튼 주위를 흐르는 왼쪽 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 여전히 텍스트 DIV 정보 아래, IE와 Chrome에서. (다만 FYI, 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>