html - 查找有关如何解决此 div 表问题的信息

Question

我几乎成功地完成了所有设置，但遇到了一些奇怪的问题，无论我如何尝试，我似乎都无法弄清楚。我遇到的问题是:

1. 右侧间距太大。
2. 表格始终叠放在一起(没有任何间距)。我一直在尝试拥有它，以便它可以容纳尽可能多的“框”列(当然每个框之间都有空格)，然后再根据某人的分辨率有多宽来制作新行。
3. 奇怪的是，由于某种原因，右侧边框的图像似乎显示错误/是左侧。我已经尝试了很多东西，但似乎仍然无法修复它。图像文件是正确的，所以我不确定为什么它一直显示错误的文件。 - 似乎已经修复了这个!
4. 此刻，我需要重新粘贴整个 TR 代码，而不是只做 <div>*infohere*</div>或者第一个框只是进一步拉伸(stretch)(如 jsfiddle 的第一个示例所示)。有什么办法我可以得到它所以我只需要做 div秒？或者我想做的事情是不可能的？

CSS:

table#t_gallery, table#t_content{
    border-collapse:collapse;
    border-spacing:0px;
    margin:0px auto;
    padding:0px;
}

table#t_gallery {
    margin-top:12px;
}

table#t_gallery td {
    padding:0px;
}

#t_gallery_top, #t_gallery_bottom {
    background: url("/top.png") 0 0 no-repeat;
    height:6px;
    width:265px;
}

#t_gallery_bottom {
    background-image:url("/bottom.png");
}

#t_gallery_left, #t_gallery_right {
    background: rgba(11, 14, 15, .5) url("/left.png") 0 0 repeat-y;
    width:6px;
}

#t_gallery_right {
    background-image:url("/right.png");
}

#t_gallery_middle {
    background-color: rgba(11, 14, 15, .65);
    width:252px;
}

#t_gallery_middle div{
    display:inline-block;
    text-align:center;
    padding:5px 10px 5px;
    vertical-align:top;
}

JSFiddle: https://jsfiddle.net/0waobznt/
我的目标是: http://i.imgur.com/g44Kkl1.png

Answer 1

您好，我已经修改了您的代码以获得图像中想要的结果。 尝试使用下面的代码

table#t_gallery, table#t_content{
	border-collapse:separate;
	border-spacing:0px;
	margin:0px auto;
	padding:0px;
  
}
table#t_global{
	border-collapse:separate;
	border-spacing:20px;
	margin:0px auto;
	padding:0px;
  
}
table#t_gallery {
	margin-top:12px;
}

table#t_gallery td {
	padding:0px;
}
table#t_gallery tr {

  margin:20px !important;
}
#t_gallery_top, #t_gallery_bottom {
	background: url("http://seac.crystal-dreams.us/top.png") 0 0 no-repeat;
	height:6px;
	width:265px;
}

#t_gallery_bottom {
	background-image:url("http://seac.crystal-dreams.us/bottom.png");
}

#t_gallery_left, #t_gallery_right {
	background: rgba(11, 14, 15, .5) url("http://seac.crystal-dreams.us/left.png") 0 0 repeat-y;
	width:6px;
}

#t_gallery_right {
	background-image:url("http://seac.crystal-dreams.us/right.png");
}

#t_gallery_middle {
	background-color: rgba(11, 14, 15, .65);
	width:252px;
  text-align:center;
	border-spacing:100px;
}

#t_gallery_middle div{
	display:inline-block;
	text-align:center;
	padding:5px 10px 5px;

}

<table id="t_global">
<tr><td><table id="t_gallery">
  <tr>
	<td id="t_gallery_top" colspan="3"></td>
  </tr><tr>
	<td id="t_gallery_left"> </td>
	<td id="t_gallery_middle"> 

	<!-- Do not edit above //-->
	
<div >
				<a href="http://angelears.crystal-dreams.us/blanksc.png" rel="gallery-mcplush" title="Blankness"><img src="http://seac.crystal-dreams.us/blanksc.png" width="200" height="200" border="0"></a> <br>
				Unknown item<br>
        Gotten from: Unknown<br>
        Still Available: Unknown</div>       
				
			
	<!-- Do not edit below //-->
	</td>
	<td id="t_gallery_right"> </td>
  </tr><tr>
	<td id="t_gallery_bottom" colspan="3"></td>
  </tr>
  

</table></td><td><table id="t_gallery">
  <tr>
	<td id="t_gallery_top" colspan="3"></td>
  </tr><tr>
	<td id="t_gallery_left"> </td>
	<td id="t_gallery_middle"> 

	<!-- Do not edit above //-->
	
<div >
				<a href="http://angelears.crystal-dreams.us/blanksc.png" rel="gallery-mcplush" title="Blankness"><img src="http://seac.crystal-dreams.us/blanksc.png" width="200" height="200" border="0"></a> <br>
				Unknown item<br>
        Gotten from: Unknown<br>
        Still Available: Unknown</div>       
				
			
	<!-- Do not edit below //-->
	</td>
	<td id="t_gallery_right"> </td>
  </tr><tr>
	<td id="t_gallery_bottom" colspan="3"></td>
  </tr>
  

</table></td><td><table id="t_gallery">
  <tr>
	<td id="t_gallery_top" colspan="3"></td>
  </tr><tr>
	<td id="t_gallery_left"> </td>
	<td id="t_gallery_middle"> 

	<!-- Do not edit above //-->
	
<div >
				<a href="http://angelears.crystal-dreams.us/blanksc.png" rel="gallery-mcplush" title="Blankness"><img src="http://seac.crystal-dreams.us/blanksc.png" width="200" height="200" border="0"></a> <br>
				Unknown item<br>
        Gotten from: Unknown<br>
        Still Available: Unknown</div>       
				
			
	<!-- Do not edit below //-->
	</td>
	<td id="t_gallery_right"> </td>
  </tr><tr>
	<td id="t_gallery_bottom" colspan="3"></td>
  </tr>
  

</table></td></tr>
</table>