2015-11-19 84 views
0

我非常新的CSS所以任何帮助将是巨大的按下按钮,以格的底部

这里是一个形象:

enter image description here

如果你看,按钮说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; 
    } 

回答

0

浮动按钮向右并设置其顶边距将其推到了谷底。您也可以在文本图像和按钮之间添加一个div,并根据大小适当调整按钮的大小。