寻找有关如何解决此 div table 问题的信息

Question

我几乎设法设置好所有内容，但是运行遇到了一些奇怪的问题，无论我如何尝试，我似乎都无法弄清楚。我运行遇到的问题是：

右侧间距太大。
表格总是堆叠在另一个下面（没有任何间距）。我一直在尝试使用它，以便它可以容纳尽可能多的 "boxes" 列（当然每列之间都有空格），然后再根据某人的分辨率有多宽来创建新行。
奇怪的是，由于某种原因，右侧边框的图像似乎显示在 wrong/is 左侧。我已经尝试了很多东西，但似乎仍然无法修复它。图像文件是正确的，所以我不确定为什么它一直显示错误的文件。 - 似乎已经修复了这个！
目前，我需要重新粘贴整个 TR 代码，而不是只做 <div>*infohere*</div>，否则第一个框会被进一步拉伸（如 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>

寻找有关如何解决此 div table 问题的信息

Looking for information on how to fix problems with this div table

html

css

css-tables