div를 컨테이너 내의 다른 div 맨 위에 놓으십시오.

Question

아마도 아주 간단한 질문 일지 모르지만 저는이 문제를 직접 구현하려고 노력하고 있습니다. 문제는 내가 우리의 소프트웨어 제공에서 오는 사전 생성 된 html 코드로 작업 중이므로 하나의 div를 다른 div 위로 옮길 수 없다는 것입니다. 그러므로 나는 css에서 그것을해야만한다.

Bascally

<div class="job_description"> 
    <h1>Web Developer (.Net/Mobile)</h1> 
    <div class="job_summary"> 
     <p> 
    Some text here 
    <br> 
    <br> 
    Some text here 
     </p> 
    </div> 

    <div class="job_classifications"> 
     <div class="classification x_location"> 
      <div class="class_type">Location</div> 
      <div id="location" class="class_value"> London</div> 
     </div> 

     <div class="classification refno"> 
      <div class="class_type">Ref No</div> 
      <div class="class_value">80</div> 
     </div> 
    </div> 

나는 job_summary 위에 표시 할 job_classifications을하고 싶습니다. 그런 다음 job_classifications 내에서 서로 다른 분류를 격자 형식으로 함께 표시해야합니다.

아이디어가 있으십니까?

Answer 1

콘텐츠가 어떻게 보이는지에 따라 맞춤 설정해야 할 수도 있지만, 이와 같은 방법으로 트릭을 수행 할 수 있습니다. jQuery를 사용하여 :

$(".job_classifications").prependTo(".job_summary");

여기에 당신은 오래된 IE 용

.job_description { 
    display: table; 
    caption-side: bottom; 
} 
.job_summary { 
    display: table-caption; 
} 

그리고 위치 절대 + JS 대체를 사용할 수 있습니다 http://jsbin.com/aqukez/1/edit

Answer 2

부모 job_description을 상대적으로 배치하고 자식을 절대로 지정하면 찾고자하는 효과가 있어야합니다.

이 접근법의 요점은 가장 가까운 위치에있는 부모를 기준으로 위치를 지정하는 것입니다.

Answer 3

http://jsfiddle.net/TxgKH/3/

예를합니다.

다음과 같이 할 수 있습니다. 그리고 7보다 낮은 경우 js 폴백이 있습니다.