Question

我在td元素中有一个div，溢出：隐藏设置（td）。我希望内部div位于文档流中，然后从中分离，以便允许它稍微溢出。我如何使用CSS实现这一目标？

HTML：

<table>
   <tr>
    <td id="projectDetails">
     <div class="edit">
      <a href="">Edit</a>
     </div>
     <span id="projectName">Project Name</span><br />
     Category 1, Category 2<br />
     <hr />
     <span class="descriptor">Event Date</span>: 22/12/10 12:30<br />
     <span class="descriptor">Event Location</span>: Technion, Haifa<br />
     <span class="descriptor">Supervisor</span>: <a href="">Yosi</a>
    </td>
    <td id="projectDescription">
     <div class="edit">
      <a href="">Edit</a>
     </div>
     <span class="descriptor">Description</span>: 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
     dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </td>
   </tr>
  </table>

CSS：

table{
 table-layout: fixed;
 border-bottom: 1px solid;
 width: 1008px;

}
td{
 border-width: 0px solid;
 vertical-align: top;
 padding: 5px 5px 5px 5px;
}

#projectName{
 font-size: 22px;
 color: #892345;
}
td#projectDetails{
 width: 350px;
 border-right: 1px solid;
 overflow: hidden;
}

基本上我希望“edit”div位于两个td的右上角，但是在projectDetails td中不受其overflow：hidden属性的约束。

Answer 1

您可以使用position css属性从文档流中删除td。这允许你移动div。

#projectDescription {
  display: block;
  position: relative;
  top: 50px;
  left: 50px; 
}

example

但我不确定这是最好的方法。

更好的方法是抛弃table，并仅使用div和css进行布局，这将简化代码，使其更具可读性，更少混淆，并与内容分离布局。如果你愿意，我可以发一个简化的例子。

定位后，从文档流中分离元素

1 个答案: