Question

可能是一个非常简单的问题，但我厌倦了自己试图实现这个问题。问题是我正在使用来自我们软件产品的预生成的html代码，因此不能在html中将一个div移到另一个div之上。因此，我必须在css中进行。

  <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_classifications出现在job_summary之上。然后在job_classifications中，我需要以网格格式一起显示每个不同的分类。

有什么想法吗？

Answer 1

这样的事情可能会起作用，但可能需要根据内容的确切程度进行一些定制。使用jQuery：

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

以下是http://jsbin.com/aqukez/1/edit

的示例

Answer 2

将父job_description定位为相对，将子项定位为absolute应该给出您正在寻找的效果。

这种方法的要点是将位置定位在最接近的父母身上。

Answer 3

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

您可以使用

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

并且为旧的位置绝对+ js后退ie。

你可以这样做:) 而对于低于7，则有一个js后退。

强制div到容器中另一个div的顶部

3 个答案: