我很难让一段文本对齐到图表的右侧。
这是生成的 html 应该的样子
这是它目前的样子
在添加第二列文本之前，一切看起来都很完美。现在看起来它不仅没有对齐到图表 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>
不太确定这里出了什么问题，但我无法修复它
最佳答案
更改代码自
<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 列之后的下一个空间中呈现。
关于html - 无法让文本在此 div 旁边排列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33768760/