divs Canh lề trong <td> lên trên of the <td>

Question

Cập nhật: thêm jsfiddle: http://jsfiddle.net/WgzgF/11/

Tôi có một bảng với một loạt các <td>. Mỗi td có một div .tdcont giống như một trình bao bọc của tất cả nội dung trong đó td. Trong .tdcont, tôi có 2 nhóm divs .alwaystop và .below-at.

<td class="table-td"> 
    <div class="tdcont"> 
     <div class="alwaystop">   
     <div class="at1">at1</div> 
     <div class="at2">at2</div> 
     <div class="at3">at3</div> 
     </div>    
     <div class="below-at"> 
     <div class="bat1">bat1</div> 
     <div class="bat2">bat2</div> 
     <div class="bat3">bat3</div> 
     </div> 
    </div> 
</td> 

Vấn đề tôi đang gặp là alwaystop là nghĩa vụ liên kết chính nó đến biên giới trên của tế bào và below-at là nghĩa vụ phải đi ngay dưới nó như thế này

_____________________________________________________ 
at1 at2 at3  | at1 at2 at3  | at1 at2 at3 | 
bat1 bat2 bat3 | bat1 bat2 bat3 | bat1 bat2 bat3 | 
small image here | big image here |    | 
        | is taking lots |    | 
        | of space  |    | 
__________________|_________________|________________|  

Những gì tôi tìm kiếm là alwaystop và below-at chính giữa theo chiều dọc như bạn thấy trong f2 http://jsfiddle.net/WgzgF/11/ này vì vậy nếu một trong các ô liền kề trong hàng này dài, alwaystop chính nó ở độ cao của hàng này như thế này

_____________________________________________________ 
        | at1 at2 at3  |    | 
        | bat1 bat2 bat3 |    | 
at1 at2 at3  | big image here | at1 at2 at3 | 
bat1 bat2 bat3 | is taking lots | bat1 bat2 bat3 | 
small image here | of space  |    | 
__________________|_________________|________________|  

Điều tôi muốn làm là làm cho alwaystop luôn bắt đầu từ đầu ô bất kể chiều cao của ô liền kề, sau đó là below-at. Tôi có thể làm cái này như thế nào?

Tôi nên thêm rằng tôi có nội dung của alwaystop được thả bên trái, do đó, nội dung của below-at, vì vậy chúng được cho là giống như 2 hàng bên trong đó td.

.at1, .at2, .at3{ 
    float:left; 
} 
.bat1, .bat2, .bat3{ 
    float:left; 
} 

Css cho luôn luôn và dưới thời gian trống. Tôi đã thử một loạt các công cụ như định vị thẳng đứng và tuyệt đối, nhưng không có gì hiệu quả và tôi đã từ bỏ và xóa chúng đi.

.alwaystop{ 
} 
.below-at{ 
} 

Answer 1

tôi đã chứng minh như @Damien gợi ý trong các ý kiến:

http://jsfiddle.net/AnrietteC/WgzgF/

Và nó có vẻ là làm những gì bạn muốn, nếu tôi hiểu đúng.

Answer 2

Hãy thử điều này:

.table-td { 
    border: 1px solid red; 
    vertical-align: top; 
}