錨定標記在一個格下方

我有兩個並排顯示的表，並且我有兩個與這些表中的每一個相關的按鈕，我希望按鈕（錨標記）出現在桌子下方，而桌子仍然處於側面並排錨定標記在一個格下方

我的表結構如下：

<div id="table"> 
<div id="detail-table"> 
<table> 
...some table data... 
</table> 
<a href></a> 
<a href></a> 
</div> // detail-table close 
<div id="no-detail-table"> 
<table> 
...some table data... 
</table> 
<a href></a> 
<a href></a> 
</div> // no-detail-table close 
</div> // table div close

相關的CSS：

div#table{ 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 

table{ 
    display:inline-block; 
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 

}

我所要的輸出是這樣的（見圖片）：我試過浮動親perty和位置：絕對的，頂部：，左起：！，但不可能得到所需的輸出

enter image description here

的jsfiddle：http://jsfiddle.net/a8THA/

來源

2013-11-23 user2933671

你能在這裏提供小提琴演示鏈接嗎？ –

在OP – user2933671

只是適用float到#table div並設置width到50%：

#table{ 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 

#table div { 
    width:50%; float:left; 
} 

table{ 
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
    width:100%; 
}

看到這個fiddle

來源

2013-11-23 07:54:34

你將不得不申報表作爲塊元素（沒有內聯-block）並浮動細節div以達到所需的效果。例如：

table { display:block; } 
#detail-table { float:left; } 
#no-detail-table { float:left; margin-left: 50px /* Add space between tables. Or you could float this div right (float:right;) */ }

這裏是一個鏈接到一個工作示例：http://jsfiddle.net/86NQ7/

來源

2013-11-23 07:47:58 ryantbrown

中加入了jsfiddle鏈接我做了你說的，但是我在左邊的表格上找到了鏈接，檢查我在OP中的jsfiddle鏈接是否有我的原始表格結構 – user2933671

你可以試試這個（Example）

#table div { 
    display:inline-block; 
    text-align:center; 
}

或者，this one（用於鏈接使用的包裝DIV）

#table div { 
    display:inline-block; 
} 
#table div#links { 
    text-align:center; 
    display:block; 
}

或者，this one（usin摹tfoot）

#table div { 
    display:inline-block; 
} 

div#table table tfoot td{ 
    text-align:center; 
}

來源

2013-11-23 07:52:07

你可以試試這個，

 <tr> 
     <td colspan="7"> 
      <a href="some link" class="btn btn-rounded btn-success" download="" id="download-detail-button">Download</a> 
      <a class=" btn btn-rounded btn-info" target="_blank" onclick="print command" id="print-button">Print</a></td> 
    </tr>

演示：http://jsfiddle.net/a8THA/2/

來源

2013-11-23 08:01:41

錨定標記在一個格下方

回答

相關問題