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 - 使内容排队

回答

相关问题