不能让文本排在这个div旁边

时间:2015-11-17 23:02:42

标签: html css

我很难获得一段文字对齐图表右侧

以下是生成的html应该是什么样子

enter image description here

以下是目前的情况

enter image description here

在添加第二列文字之前,一切看起来都很完美。现在它看起来不仅不会在图表div旁边对齐,而且它也会抛弃灰色容器。

这是我的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
    }
    #reviewspotlight {
     position: relative;
     background-color:#000000;
     height:111px;
     z-index:19997;
     font-family: DinWebCond, Sans-serif;
     color:#ffffff;
    }
    #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
    }
    #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;
    }

这是我的HTML:

<div id="reviews">
           <xsl:for-each select="/*/clubreviews/review">
            <table cellpadding="0" cellspacing="0">
                <tr class="reviewuserinfo">
                <td width="1%"><img class="avatar" src="/act/avatar/35274"/></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" style="padding-right:15px">Joined 2 years ago<br/>12 reviews and 49 comments posted</td>
                </tr>
                <tr class="reviewuserdata">

                <td style="width:100%" colspan="3">
                    <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 style="width:100%" colspan="3">
                A warm welcome from the time you enter the front<br/> door. The security is helpful and nice, the girls are <br/>very friendly, if not a little
                pushy... but hey, they <br/>gotta make a living too. Top quality....<br/><br/>
                A warm welcome from the time you enter the front<br/> door. The security is helpful and nice, the girls are <br/>very friendly, if not a little
                pushy... but hey, they <br/>gotta make a living too. Top quality....    
                </td>
                </tr>
            </table>
            </xsl:for-each>     
          </div>

不太确定这里有什么问题,但我无法修复

2 个答案:

答案 0 :(得分:1)

更改代码
<td style="width:100%" colspan="3">

<td>

另外,我建议你做一些关于使用div元素而不是表格进行设计的研究

如果您愿意,可以更改第一次出现的

<td style="width:100%" colspan="3">

代表

<td colspan="2">

的第二次出现
<td colspan="1">

这种情况正在发生,因为第一行有3列<td>,当您指定第一行<td colspan='3'>将占用3列时,下一个<td>将在下一个空格中呈现,在3列之后。

答案 1 :(得分:0)

因为您使用的是style="width:100%"``<td style="width:100%" colspan="3">

我建议不要使用%(百分比),但如果这是您要使用的内容,则第一个<td>将是<td style="width:30%">,第二个<td style="width:70%" colspan="2">将是colspan="3" {1}}

bootstrap占用整行,因为您只有3列

但是通过使用百分比,当在较小的屏幕上显示时,它将无法正常显示。建议使用divs并使用col-xs-12 col-sm-12 col-md-4,这样您可以为左侧指定col-xs-12 col-sm-12 col-md-8,为右侧指定id created_at updated_at deleted_at (if this has a date, entire record and all children considered deleted) ,这样当在较小的屏幕上时,它会移动为了更好看,第二个div到底部