开发者

Detaching an element from document flow after positioning it

开发者 https://www.devze.com 2023-01-28 09:28 出处:网络
I have a div inside a td element with overflow:hidden set to it (the td). I want the inner div to be positioned in the document flow, and then detached from it so that it is allowed to overflow a litt

I have a div inside a td element with overflow:hidden set to it (the td). I want the inner div to be positioned in the document flow, and then detached from it so that it is allowed to overflow a little. How do I achieve that using CSS?

The 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">
     开发者_Go百科<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>

The 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;
}

Basically I want the "edit" div to be positioned at the top right of both td's, but in the projectDetails td to not be constrained by its overflow:hidden attribute.


you can remove the td from the document flow by using the position css attribute. This allows you to move the div around.

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

example

but I'm not sure this is the best way to go about it.

A better way to go about it is to ditch the table, and do the layout using only divs and css, which would simplify your code, make it more readable, less confusing, and separate layout from content. I can post a simplified example if you'd like.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号