Question

评论文字似乎错误地对齐。它需要被推到右边。

以下是目前的图片：

这是它应该是什么样子：

这是我的HTML（其评论div ）：

        <table cellpadding="0" cellspacing="0">
        <tr class="reviewuserinfo">
        <td width="1%"><img class="avatar" src="/act/avatar/{./userid}"/></td>
        <td><a href="/profile/{./userid}"><xsl:value-of select="./username"/></a><br/><span style="color:#a0a0a0">posted on <xsl:value-of select="./formatteddate"/></span></td>
        <td align="right"><div class="reviewusermetadata">Joined 2 years ago<br/>12 reviews and 49 comments posted</div></td>
        </tr>
        <tr class="reviewuserdata">         
        <td colspan="2">
        <table cellpadding="0" cellspacing="0" class="reviewchart">
        <tr><td><h2>Overall Rating <img class="stars" src="/act/stars/{./rating}/large" /> <span class="rating"><xsl:value-of select="./rating"/></span></h2></td></tr>
        <tr>
        <td>
        <dl>
        <dt><span>QUALITY OF THE DANCERS</span></dt>
        <dd><div class="bar"><div style="width: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:100%"></div></div><xsl:value-of select="./privatedances"/></dd>                              
        <dt><span>OVERALL HOSPITALITY</span></dt>
        <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./hospitality"/></dd>
        <dt><span>GUEST TO DANCER RATIO</span></dt>
        <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./guestdancerratio"/></dd>
        <dt><span>VARIETY OF DANCERS</span></dt>
        <dd><div class="bar"><div style="width: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:100%"></div></div><xsl:value-of select="./covercharge"/></dd>
        <dt><span>VALUE FOR MONEY, DRINKS</span></dt>
        <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./drinks"/></dd>
        <dt><span>VALUE FOR MONEY, FOOD</span></dt>
        <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./food"/></dd>
        <dt><span>OVERALL ATMOSPHERE</span></dt>
        <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./atmosphere"/></dd>
        <dt><span>SOUND SYSTEM AND DJ</span></dt>
        <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./sound"/></dd>
        </dl>                           
        </td>
        </tr>
        </table>
        </td>
        <td colspan="1">
        <div class="comment">
        Oh my gosh this club was incredible. The women were fantastic, the food was great, and the environment was nice as well
        </div>  
        </td>
        </tr>
        </table>

这是我的CSS（评论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
    }
    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 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;
        display:inline-block;
    }
    #reviews table td h2 span.rating{
        position:absolute;
        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 75px;
        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;
    }

Answer 1

向id添加td，然后仅使用id调用CSS

#cmt{
    margin:25px 0 0 50px;
    font:14px/20px Arial, Helvetica, Sans-serif;
}

JS Fiddle

现在您可以控制.comment之前#reviews table .comment的CSS，border您甚至无法添加background-color或override var placeholder: String?{ didSet{ if placeholder != oldValue { placeholder = oldValue print("Placeholder Set to CurrencyTextField. Do not do that") } } }

Answer 2

对您的代码进行了一些更改：

表格现在只有页面的左侧内容
为右侧制作了一个div，然后您可以根据需要进行调整

＆＃13;

@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
}
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 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;
  display: inline-block;
}
#reviews table td h2 span.rating {
  position: absolute;
  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-left: 20px;
  width: 290px;
}
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;
}
div.comment {
  font: 14px/20px Arial, Helvetica, Sans-serif;
  display: inline;
  float: right;
  width: 296px;
}
#reviews table .reviewusermetadata {
  padding-right: 15px;
  font: 12px/12px Arial, Helvetica, Sans-serif;
}
.share_location {
  position: relative;
  margin: 20px 15px 0px 20px;
}

＆＃13;

<table cellpadding="0" cellspacing="0">
  <tr class="reviewuserinfo">
    <td width="1%">
      <img class="avatar" src="/act/avatar/{./userid}" />
    </td>
    <td>
      <a href="/profile/{./userid}">
        <xsl:value-of select="./username" />
      </a>
      <br/><span style="color:#a0a0a0">posted on <xsl:value-of select="./formatteddate"/></span>
    </td>
    <td align="right">
      <div class="reviewusermetadata">Joined 2 years ago
        <br/>12 reviews and 49 comments posted</div>
    </td>
  </tr>
</table>
<table>
  <tr class="reviewuserdata">
    <td colspan="2">
      <table cellpadding="0" cellspacing="0" class="reviewchart">
        <tr>
          <td>
            <h2>Overall Rating <img class="stars" src="/act/stars/{./rating}/large" /> <span class="rating"><xsl:value-of select="./rating"/></span></h2>
          </td>
        </tr>
        <tr>
          <td>
            <dl>
              <dt><span>QUALITY OF THE DANCERS</span></dt>
              <dd>
                <div class="bar">
                  <div style="width: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:100%"></div>
                </div>
                <xsl:value-of select="./privatedances" />
              </dd>
              <dt><span>OVERALL HOSPITALITY</span></dt>
              <dd>
                <div class="bar">
                  <div style="width:100%"></div>
                </div>
                <xsl:value-of select="./hospitality" />
              </dd>
              <dt><span>GUEST TO DANCER RATIO</span></dt>
              <dd>
                <div class="bar">
                  <div style="width:100%"></div>
                </div>
                <xsl:value-of select="./guestdancerratio" />
              </dd>
              <dt><span>VARIETY OF DANCERS</span></dt>
              <dd>
                <div class="bar">
                  <div style="width: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:100%"></div>
                </div>
                <xsl:value-of select="./covercharge" />
              </dd>
              <dt><span>VALUE FOR MONEY, DRINKS</span></dt>
              <dd>
                <div class="bar">
                  <div style="width:100%"></div>
                </div>
                <xsl:value-of select="./drinks" />
              </dd>
              <dt><span>VALUE FOR MONEY, FOOD</span></dt>
              <dd>
                <div class="bar">
                  <div style="width:100%"></div>
                </div>
                <xsl:value-of select="./food" />
              </dd>
              <dt><span>OVERALL ATMOSPHERE</span></dt>
              <dd>
                <div class="bar">
                  <div style="width:100%"></div>
                </div>
                <xsl:value-of select="./atmosphere" />
              </dd>
              <dt><span>SOUND SYSTEM AND DJ</span></dt>
              <dd>
                <div class="bar">
                  <div style="width:100%"></div>
                </div>
                <xsl:value-of select="./sound" />
              </dd>
            </dl>
          </td>
        </tr>
      </table>


      <div class="comment">
        Oh my gosh this club was incredible. The women were fantastic, the food was great, and the environment was nice as well
      </div>

＆＃13;

JSFiddle

如果您需要，我可以尝试使用divs

创建一个版本

文字未正确对齐

2 个答案: