我在网上找不到任何答案,而且有人可以帮助我。
行
我的问题很简单,我试图实现以下目标。
在浏览器中它完美运行。但在雷鸟中没有分开它们的线。
我正在使用<table>
因为我无法以其他方式将价格与最低价格进行对齐。
这是我的代码。
<style>
.verticalLineSimilar
{
border-right:1px grey solid;
width: 0;
background-color: transparent;
}
.similarTitle
{
font-size: 12px;
width: 160px;
text-align: center;
}
.similarImage
{
text-align: center;
}
.similarImage img
{
max-height:100px;
max-width:100px;
}
.simiarPrice
{
color:red;
font-size: 18px;
text-align: center;
}
</style>
<div id="RecommendationForYou" style="text-align: center;">
<table style="display: inline-block;">
<tr>
<td class="similarTitle">{!=>SimilarTitle1<=!}</td>
<td class="verticalLineSimilar" rowspan="3"></td>
<td class="similarTitle">{!=>SimilarTitle2<=!}</td>
<td class="verticalLineSimilar" rowspan="3"></td>
<td class="similarTitle">{!=>SimilarTitle3<=!}</td>
<td class="verticalLineSimilar" rowspan="3"></td>
<td class="similarTitle">{!=>SimilarTitle4<=!}</td>
</tr>
<tr>
<td class="similarImage"><img src="{!=>SimilarImage1<=!}"></td>
<td class="similarImage"><img src="{!=>SimilarImage2<=!}"></td>
<td class="similarImage"><img src="{!=>SimilarImage3<=!}"></td>
<td class="similarImage"><img src="{!=>SimilarImage4<=!}"></td>
</tr>
<tr>
<td class="simiarPrice">$ {!=>SimilarPrice1<=!}</td>
<td class="simiarPrice">$ {!=>SimilarPrice2<=!}</td>
<td class="simiarPrice">$ {!=>SimilarPrice3<=!}</td>
<td class="simiarPrice">$ {!=>SimilarPrice4<=!}</td>
</tr>
</table>
</div>
我也试过以下
.verticalLineSimilar
{
width: 1px;
background-color: grey;
}
但是td不会低于3px女巫看起来非常不专业
有什么东西我做错了或我应该做的事情可以让我真正在雷鸟中显示那些线。
感谢您提供的任何帮助!
答案 0 :(得分:1)
出于某些奇怪的原因,雷鸟不允许在td元素上使用边框。
所以我做的是
display: inline-block;
height: 100%;
border-right:1px grey solid;
在td元素的div内部,用于做边框。
答案 1 :(得分:0)
这看起来似乎微不足道,但您尝试过使用rgb(128,128,128)或十六进制颜色(#808080)吗?