不能让文本排在这个div旁边
我很难获得一段文字对齐图表右侧。
以下是生成的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>
不太确定这里有什么问题，但我无法修复
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到底部
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？