[英]Aligning uneven rows in div based table
我有一個使用div構建的表,該表使用圖像作為單元格數據。 如果我有一個丟失的圖像,我想這樣基本上將行中的其他圖像居中:
所有圖片:
xxxxx
xxxxx
缺少圖片(第二行2個):
xxxxx
xxx
目前,我只能使結果向左對齊:
xxxxx
xxx
CSS:
.table
{
margin-top:5px;
margin-left:15px;
margin-right:15px;
display: table;
width:auto;
border-spacing:0px;
}
.row
{
display:table-row;
width:auto;
margin-left:auto;
margin-right:auto;
}
.cell
{
float:left;
display:table-column;
width:auto;
}
我嘗試向左/向右自動排行,但沒有骰子。 有什么建議么?
編輯
<div class="table">
<div class="row">
#if ($has1)
<div class="cell"><a href="#1"><img src="1.jpg" width="138"/></a></div>
#end
#if ($has2)
<div class="cell"><a href="2"><img src="2.jpg" width="138"/></a></div>
#end
#if ($has3)
<div class="cell"><a href="#3"><img src="3.jpg" width="138"/></a></div>
#end
</div>
<div class="row">
#if ($has4)
<div class="cell"><a href="#4"><img src="4.jpg" width="138"/></a></div>
#end
#if ($has5)
<div class="cell"><a href="5"><img src="5.jpg" width="138"/></a></div>
#end
#if ($has6)
<div class="cell"><a href="#6"><img src="6.jpg" width="138"/></a></div>
#end
</div>
</div>
好的,試試這個:
.table
{
margin-top:5px;
margin-left:15px;
margin-right:15px;
display: table;
width:auto;
border-spacing:0px;
}
.row
{
display:table-row;
width:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.cell
{
/*display:table-column;*/
display:inline-block;
width:auto;
}
示例: http : //jsfiddle.net/JARQs/
嘗試這個:
.row
{
display:table;
width:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
}
您還可以將容器與display:table css一起使用,並保留原始的.row css類
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.