このdivテーブルの問題を解決する方法の情報を探す

Question

私はほとんど全てを得ることができましたが、私がどれほど試しても分かりませんでした。私が遭遇している問題は以下の通りです：

1. 右側のスペースが大きすぎます。
2. テーブルは常に他のものの下に積み重なります（スペーシングはありません）。私はそれを持っているようにしようとしているので、誰かの解像度がどれほど広がっているかによって、新しい行を作る前にできるだけ多くの列の "ボックス"に収まるようにしています。
3. 奇妙なことに、何らかの理由で、右側の境界の画像が正しく表示されていないように見える/左側です。私は複数のことを試したが、まだそれを修正するように見えることはできません。イメージファイルが正しいので、間違ったイメージを表示し続ける理由がわかりません。 - これを修正したようです！
4. 現時点では、<div>*infohere*</div>を実行するのではなく、TRコード全体を基本的に再ペーストする必要があります。または、最初のボックスが（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{ 
 
\t border-collapse:separate; 
 
\t border-spacing:0px; 
 
\t margin:0px auto; 
 
\t padding:0px; 
 
    
 
} 
 
table#t_global{ 
 
\t border-collapse:separate; 
 
\t border-spacing:20px; 
 
\t margin:0px auto; 
 
\t padding:0px; 
 
    
 
} 
 
table#t_gallery { 
 
\t margin-top:12px; 
 
} 
 

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

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

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

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

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

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

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

 
}

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

 
\t <!-- Do not edit above //--> 
 
\t 
 
<div > 
 
\t \t \t \t <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> 
 
\t \t \t \t Unknown item<br> 
 
     Gotten from: Unknown<br> 
 
     Still Available: Unknown</div>  
 
\t \t \t \t 
 
\t \t \t 
 
\t <!-- Do not edit below //--> 
 
\t </td> 
 
\t <td id="t_gallery_right"> </td> 
 
    </tr><tr> 
 
\t <td id="t_gallery_bottom" colspan="3"></td> 
 
    </tr> 
 
    
 

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

 
\t <!-- Do not edit above //--> 
 
\t 
 
<div > 
 
\t \t \t \t <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> 
 
\t \t \t \t Unknown item<br> 
 
     Gotten from: Unknown<br> 
 
     Still Available: Unknown</div>  
 
\t \t \t \t 
 
\t \t \t 
 
\t <!-- Do not edit below //--> 
 
\t </td> 
 
\t <td id="t_gallery_right"> </td> 
 
    </tr><tr> 
 
\t <td id="t_gallery_bottom" colspan="3"></td> 
 
    </tr> 
 
    
 

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

 
\t <!-- Do not edit above //--> 
 
\t 
 
<div > 
 
\t \t \t \t <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> 
 
\t \t \t \t Unknown item<br> 
 
     Gotten from: Unknown<br> 
 
     Still Available: Unknown</div>  
 
\t \t \t \t 
 
\t \t \t 
 
\t <!-- Do not edit below //--> 
 
\t </td> 
 
\t <td id="t_gallery_right"> </td> 
 
    </tr><tr> 
 
\t <td id="t_gallery_bottom" colspan="3"></td> 
 
    </tr> 
 
    
 

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