永久的2x3 CSS圖片庫

Question

我有非常基本的圖片庫我該怎麼固定它是3列2行

這是HTML代碼

<div id="gallery"> 
     <div class="img"> 
      <a target="_blank" href="klematis_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis"/> </a> 
      <div class="descHead"> 
       כותרת 
      </div> 
      <div class="desc"> 
       Add a description of the image here 
      </div> 
     </div> 
     <div class="img"> 
      <a target="_blank" href="klematis2_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis" /> </a> 
      <div class="descHead"> 
       כותרת 
      </div> 
      <div class="desc"> 
       Add a description of the image here 
      </div> 
     </div> 
     <div class="img"> 
      <a target="_blank" href="klematis3_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis" /> </a> 
      <div class="descHead"> 
       כותרת 
      </div> 
      <div class="desc"> 
       Add a description of the image here 
      </div> 
     </div> 
     <div class="img"> 
      <a target="_blank" href="klematis4_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis" /> </a> 
      <div class="descHead"> 
       כותרת 
      </div> 

      <div class="desc"> 
       Add a description of the image here 
      </div> 

     </div> 
     <div class="img"> 
      <a target="_blank" href="klematis4_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis" /> </a> 
      <div class="descHead"> 
       כותרת 
      </div> 
      <div class="desc"> 
       Add a description of the image here 
      </div> 

     </div> 
     <div class="img"> 
      <a target="_blank" href="klematis4_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis" /> </a> 
      <div class="descHead"> 
       כותרת 
      </div> 
      <div class="desc"> 
       Add a description of the image here 
      </div> 

     </div> 

    </div> 

，這是CSS代碼

 
#gallery{ 

} 
div.img { 
    margin: 2px; 
    height: auto; 
    width: auto; 
    float: right; 
} 
div.img img { 
    width: 200px; /* what is the img size*/ 
    height: 200px; 
    display: inline; 
    margin-left: 30px; 
    margin-right: 30px; 
    margin-bottom: 20px; 
    border: 1px solid #ffffff; 
} 

/* 
div.img a:hover img { 
border: 1px solid #0000ff; 
}*/ 
div.desc { 
    text-align: center; 
    font-weight: normal; 
    width: 120px; 
    margin: 30px; 
} 
.descHead { 
    margin-right: 30px; 
    margin-top: 20px; 
    margin-bottom: 15px; 
    font-family: Tahoma; 
    font-size: 24px; 
    color: #323232; 
} 

.desc { 
    margin-right: 30px !important; 
    margin-bottom: 40px !important; 
    font-family: Tahoma; 
    font-size: 14px; 
    color: #323232; 
} 

Answer 1

如果你不能改變的HTML，這將做到這一點：

.gallery { 
    width: /* ((width of .image including padding/margin) * 3) */ 
    overflow: hidden; 
    margin: /* top: 0, right: 0, bottom: -(size of .image's bottom margin), left: -(size of .image's left margin) */ 
    /* 
    yes, that's right, the left/bottom margins are negative, but it's purely presentational 
    for left floated .image, replace right with left 
    */ 
} 

否則，使用CSS顯示屬性將工作。

還應該指出的是，部分/標題/段落標記可能比無意義的div標籤更合適。或者，圖/ figcaption收集也可能是適當的：

http://html5doctor.com/the-figure-figcaption-elements/

Answer 2

我會考慮使用CSS顯示：表：http://www.w3schools.com/cssref/pr_class_display.asp