强制一个div在容器内的另一个div的顶部

可能是一个非常简单的问题，但我正在厌倦尝试自己实现这一点。问题是我正在使用来自我们的软件产品的预生成的html代码，因此无法在html中将一个div移动到另一个div上方。因此我必须在CSS中完成。强制一个div在容器内的另一个div的顶部

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

Bascally我想job_classifications出现上述job_summary。然后在job_classifications内，我需要将每个不同的分类以网格格式一起显示。

任何想法？

来源

2012-11-16 jezzipin

你只能用绝对定位来做到这一点，并且需要知道'job_description'的高度 – Andy

必须有另一种方法来做到这一点。绝对定位通常是不好的做法，因为它基本上意味着div从容器中滑出。 – jezzipin

如果Javascript是一个选项，你可以进行任何重新排列你想要的，它会发生在元素加载后。这有可能吗？ – gotohales

类似这样的东西可能会做到这一点，尽管它可能需要根据内容的外观来定制。使用jQuery：

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

下面是一个例子http://jsbin.com/aqukez/1/edit

来源

2012-11-16 14:49:57 gotohales

太好了。感谢mookamafoob！ – jezzipin

将父作业描述定位为相对的，孩子作为绝对应该给出您正在寻找的效果。

该方法的主要观点是针对最接近的定位父母定位位置。

来源

2012-11-16 14:49:39

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

您可以使用

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

和位置绝对+ JS老即回退。

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

来源

2012-11-16 14:52:18 Flops

强制一个div在容器内的另一个div的顶部

回答

相关问题