CSS - 使內容排隊

我有3個標籤，其中包含一些文本和文本後的按鈕。即使td包含不同數量的文本，我也希望按鈕排列齊整。CSS - 使內容排隊

我不想在段落上設置固定的高度，因爲這會限制可以輸入的文本的數量。有沒有辦法做到這一點？

這裏是什麼樣子的屏幕截圖：

http://s23.postimage.org/cnp1f70vv/Untitled_1.jpg

這裏的HTML代碼（道歉）：

<td width="300" valign="top" height="114"> 
    <div class="imageTextOverlay_1">BOOK A VISIT</div> 
    <a href="/visit-us.aspx"> 
    <img width="300" height="136" alt="Visit Beaufort Court" src="/media/1281571/visit_us.jpg"> 
    </a> 
<h3>Visit Beaufort Court</h3> 
<p>If you would like to find out more about wind energy, solar power, borehole cooling or biomass then come and visit us at Beaufort Court. We welcome schools, colleges, universities, professional bodies and community groups.</p> 
<a class="imageButtonOverlay" href="/visit-us.aspx">Book Now >></a> 
</td>

下面是按鈕的CSS：

.imageButtonOverlay { 
    background-color: #78A22F; 
    border-radius: 5px 5px 5px 5px; 
    color: #FFFFFF; 
    float: right; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    margin: 5px 0 20px; 
    padding: 5px 7px; 
}

來源

2013-03-19 Madness

你的代碼?????? – Sowmya 2013-03-19 10:55:58

對不起，現在添加它。 – Madness 2013-03-19 11:00:25

我不敢相信這樣一個簡單的解決方案永遠不會跨越我的腦海！謝謝你們:) – Madness 2013-03-19 11:10:14

由於您已經在使用表格，您可以簡單地將您的屁股分開在新行上：

<table> 
    <tbody> 
     <tr> 
      <td><!-- First paragraph --></td> 
      <td><!-- Second paragraph --></td> 
      <td><!-- Third paragraph --></td> 
     </tr> 
     <tr> 
      <td><!-- First button --></td> 
      <td><!-- Second button --></td> 
      <td><!-- Third button --></td> 
     </tr> 
    </tbody> 
</table>

JSFiddle example。

來源

2013-03-19 11:00:15

它怎麼會變得醜陋？對於HTML5中的佈局，表格很酷，特別是當邊框=「0」限定時。 – 2013-03-19 11:12:39

你可以通過CSS position:absolute設置按鈕的位置，就像下面：

td { 
    position:relative; 
    padding-bottom:40px; 
} 
td .imageButtonOverlay { 
    position:absolute; 
    bottom:10px; 
    right:10px; 
}

來源

2013-03-19 11:00:18 Valky

到td和position:absolute添加position:relative到a class

td{ 
    background:yellow; 
    position:relative 
} 
.imageButtonOverlay{ 
    position:absolute; 
    bottom:0 
}

DEMO

來源

2013-03-19 11:01:30 Sowmya

與我的相似答案... ;-) – Valky 2013-03-19 11:04:16

是的。我猜想並行發佈 – Sowmya 2013-03-19 11:21:49

<table border="0"> 
    <tbody> 
    <tr> 
     <td>Paragraph 1</td> 
     <td>Paragraph 2</td> 
     <td>Paragraph 3</td> 
    </tr> 
    <tr> 
     <td style="text-align:right"><input type="button" value="Button 1" /></td> 
     <td style="text-align:right"><input type="button" value="Button 2" /></td> 
     <td style="text-align:right"><input type="button" value="Button 3" /></td> 
    </tr> 
    </tbody> 
</table>

來源

2013-03-19 11:02:27

CSS - 使內容排隊

回答

相關問題