Question

我对CSS非常陌生，所以任何帮助都会很棒

这是一张图片：

如果你看，Like this review的按钮就在文本的正下方。我想要它在右下方。

我无法弄清楚如何做到这一点。我能够通过设置really large margins来实现它，但这似乎不是一个正确的解决方案，因为文本推送的余量超过了边距集。

这是我的HTML：

    <tr>
    <td>
    <dl>
    <dt><span>QUALITY OF THE DANCERS</span></dt>
    <dd><div class="bar"><div style="width:{./qualitydancers div 5*100}%"></div></div><xsl:value-of select="./qualitydancers"/></dd>
    <dt><span>PRIVATE DANCES, VALUE FOR MONEY</span></dt>
    <dd><div class="bar"><div style="width:{./privatedances div 5*100}%"></div></div><xsl:value-of select="./privatedances"/></dd>                              
    <dt><span>OVERALL HOSPITALITY</span></dt>
    <dd><div class="bar"><div style="width:{./hospitality div 5*100}%"></div></div><xsl:value-of select="./hospitality"/></dd>
    <dt><span>GUEST TO DANCER RATIO</span></dt>
    <dd><div class="bar"><div style="width:{./guestdancerratio div 5*100}%"></div></div><xsl:value-of select="./guestdancerratio"/></dd>
    <dt><span>VARIETY OF DANCERS</span></dt>
    <dd><div class="bar"><div style="width:{./varietydancers div 5*100}%"></div></div><xsl:value-of select="./varietydancers"/></dd>
    <dt><span>VALUE FOR MONEY, COVER CHARGE</span></dt>
    <dd><div class="bar"><div style="width:{./covercharge div 5*100}%"></div></div><xsl:value-of select="./covercharge"/></dd>
    <dt><span>VALUE FOR MONEY, DRINKS</span></dt>
    <dd><div class="bar"><div style="width:{./drinks div 5*100}%"></div></div><xsl:value-of select="./drinks"/></dd>
    <dt><span>VALUE FOR MONEY, FOOD</span></dt>
    <dd><div class="bar"><div style="width:{./food div 5*100}%"></div></div><xsl:value-of select="./food"/></dd>
    <dt><span>OVERALL ATMOSPHERE</span></dt>
    <dd><div class="bar"><div style="width:{./atmosphere div 5*100}%"></div></div><xsl:value-of select="./atmosphere"/></dd>
    <dt><span>SOUND SYSTEM AND DJ</span></dt>
    <dd><div class="bar"><div style="width:{./sound div 5*100}%"></div></div><xsl:value-of select="./sound"/></dd>
    </dl>                           
    </td>
    </tr>
    </table>
    </td>
    <td colspan="1">
    <div class="comment">
    <xsl:value-of select="./comment"/>
    <div>
    <button>Like This Review</button>
    </div>
    </div>  
    </td>
    </tr>

这是我的CSS：

    @CHARSET "UTF-8";
    .page {
     position: relative;
     background-color: #ffffff;
     width: 1200px;
     margin: 0px auto;
     box-sizing: border-box;
     border-left: 1px solid #d0d0d0;
     border-right: 1px solid #d0d0d0;   
    }
    table {
     border:0px;
     width:100% 
    }
    table.reviewsouter .reviewleft{
     width:800px;
     position:absolute;
    }
    table.reviewsouter .reviewright{
     width:400px;
     vertical-align:top;
    }
    #reviewspotlight {
     position: relative;
     background-color:#000000;
     height:146px;
     z-index:19997;
     font-family: DinWebCond, Sans-serif;
     color:#ffffff;
    }
    #reviewspotlight a:hover{
        color:#e85a06
    }
    #reviewspotlight img.spotlightphoto{
        position:relative;
        width:260px;
        height:146px;
        left:-1px;
        margin:0px;
        display:inline-block;
    }
    #reviewspotlight td a{
        color:#ffffff;
        font: 32px/32px DinWebCond,Sans-serif;
        border:none;
        text-decoration: none;  
    }
    #reviewspotlight td h1{
        margin:10px 0px 0px 15px;
        color:#ffffff;
        font:32px/32px DinWebCond, Sans-serif;
        font-weight:inherit;
    }
    #reviewspotlight td div.reviewrating
    {
        position:relative;
        margin: 2px 0px 0px 0px;    
    }
    #reviewspotlight td div.reviewrating img.reviewstars{
        /**position:absolute;*/
        display:inline-block;
        width:125px;
        height:21px;
        border:none;
        margin:0px 0px 5px 15px;
    }
    #reviewspotlight td div.phone{
      position: relative;
      height: 18px;
      font: 14px/14px Arial, Helvetica, Sans-serif;
      padding: 0px 0px 0px 22px;
      margin: 0px 15px;
      background: url(data:image/gif;base64,R0lGODlhEgASALMAADMzAJmZZv///8/Pz87OzszMzJmZmWlpaWZmZjMzMwAAAAAAAAAAAAAAAAAAAAAAACwAAAAAEgASAAAEWFDISatNiCaVjBWIonhSsHEEZYgKYK3KMLEiiUkFN9OFUJyelY3V0ygkOh+xkstsJqeERWeQ7hTFSbYCw34+oeS3chpJNodxmSbaUsJssSXHto4F1dp9HwEAOw==) 0px 0px no-repeat;
    }
    #reviewspotlight td h2{
        font:14px/14px AdlWebNorm, Serif;
        margin:5px 0px 0px 15px;
    }
    #reviews {
      position: relative;
      background-color:#ffffff;
      color:#000000;
      border-right:1px solid #d0d0d0;
    }
    #reviews table tr.reviewuserinfo {
      background-color:#f0f0f0;
      height:60px;
      border-left:1px solid #d0d0d0;      
    }
    #reviews table tr.reviewuserinfo img.avatar{
      position:relative;
      width:40px;
      height:40px;
      margin:10px;
      display: inline-block;
      vertical-align: middle;
    }
    #reviews table tr.reviewuserinfo div {
      display:block
    }
    #reviews table tr.reviewuserinfo a {
        color:#e85a06;
        font-family:DinWebCond,Sans-serif;
        border:none;
        text-decoration:none;
    }
    #reviews table tr.reviewuserdata {
      background-color:#ffffff;
      height: 315px;
      border-left:1px solid #ffffff;
      vertical-align: top;  
    }
    #reviews table td h2 {
        position:relative;
        display:inline-block;
        white-space:nowrap;
        font:27px/27px DinWebCond,Sans-serif;
        margin:0px;
        text-transform:uppercase;
        /**padding:20px 0px 9px 15px;*/
        /**padding-top:20px;*/
        /**padding-left:20px;*/
    }
    #reviews table td h2 img.stars {
        position:absolute;
        margin-left:10px;
        margin-top:1px;
        display:inline-block;
    }
    #reviews table td h2 span.rating{
        position:relative;
        margin-left:145px;
        display:inline-block;
        color:#e85a06;
        font-weight:bold;   
    }

    table.reviewchart {
        position:relative;
        display:inline-block;
        white-space:nowrap;
        border-collapse: collapse;
        font:14px/14px DinWebCond,Sans-serif;
        margin:0px;
        text-transform:uppercase;
        /**padding:20px 0px 9px 15px;*/
        padding-top:20px;
        padding-left:20px;  
    }
    table.reviewchart td.reviewlabel{
        /**padding-top:15px;*/
        padding-bottom:15px;
    }
    #reviews.dl {
        position:relative;
        margin: 15px 15px 15px 15px;
    }
    #reviews dt {
        position:relative;
        display:inline-block;
        float:left;
        width:165px;
        /**text-align:right;*/
        pointer-events:none;
        margin:0px;
        padding:3px 0px 2px 0px;
        z-index:2;
        text-align:right;
    }
    #reviews dd {
        position:relative;
        display:block;
        margin:0px;
        padding:3px 0px 2px 0px;
        z-index:1;
        font-weight:700;
        color:#e85a06;
    }
    #reviews dd .bar {
        position:relative;
        display:inline-block;
        width:50px;
        height:15px;
        margin:1px 20px -1px 20px;
    }
    #reviews dd .bar div {
        position:absolute;
        left:0px;
        top:0px;
        height:100%;
        background-color:#4ac4f3;
        border-top-right-radius:3px;
        border-bottom-right-radius:3px;
    }
    #reviews table .comment{
        margin:25px 0px 0px 25px;
        font:14px/20px Arial, Helvetica, Sans-serif;
    }
    #reviews table .reviewusermetadata{
        padding-right:15px;
        font:12px/12px Arial, Helvetica, Sans-serif;
    }
    .share_location{
        position:relative;
        margin:20px 15px 0px 20px;
    }
    .ad_location{
        position:relative;
        margin:20px 15px 0px 20px;
    }
    button {
        display: inline-block;
        outline: none;
        font: 14px/14px DinWebCond, Sans-serif;
        color: #808080;
        border: 1px solid #c0c0c0;
        background-color: #f0f0f0;
        border-radius: 3px;
        cursor: pointer;
        margin-right: 10px;
        padding: 9px 10px 7px 10px;
        text-transform: uppercase;
        text-shadow: 0px 1px 0px #ffffff;
        box-shadow: inset 0px 1px 0px #ffffff;
    }

Answer 1

将按钮浮动到右侧并设置其上边距将其推到底部。你也可以在文本图像和按钮之间设置一个div，然后适当地调整尺寸以按下按钮。

按下按钮到div的底部

1 个答案: