圖片庫定位

Question

我正在創建一個圖片庫，需要一些幫助定位。

我有html代碼：

<div id="gal"> 
     <h3 class="title">"Picture title."</h3> 
      <a href="" title=""><img class="picture" src="" alt="" /></a> 
      <p class="description">content...</p> 
    </div> 

    <div id="gal1"> 
     <h3 class="title">"Picture title."</h3> 
      <a href="" title=""><img class="picture" src="" alt="" /></a> 
      <p class="description">content...</p> 
    </div> 

與部份CSS：

#main 
{ 

    margin-top:42px; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
    background:rgba(16,16,17,0.70); 
    width:90%; 
    box-shadow: 3px 3px 2.5px #888888; 
    border-radius:5px; 
} 
div#gal 
{ 
    position:absolute; 
    display:inline; 
/*Decorations*/ 
    background:rgba(16,16,17,0.70); 
    border-style:solid; 
    border-width:3px; 
    border-color:#464646; 
    border-radius:5px; 
} 

div#gal1 
{ 
    margin-left:155px; 
    position:absolute; 
    display:inline; 
/*Decorations*/ 
    background:rgba(16,16,17,0.70); 
    border-style:solid; 
    border-width:3px; 
    border-color:#464646; 
    border-radius:5px; 
} 

我的問題是，我必須seperately位置的每個格，是否有變通方法嗎？

謝謝:)

Answer 1

你可以改變你的CSS閱讀：

div.gal { 
    float:left; 

    /*Decorations*/ 
    background:rgba(16,16,17,0.70); 
    border-style:solid; 
    border-width:3px; 
    border-color:#464646; 
    border-radius:5px; 
} 

你的HTML可以比是：

<div class="gal"> 
    ... 
</div> 

<div class="gal"> 
    ... 
</div> 

你可以閱讀更多有關使用花車這裏一家畫廊： http://css.maxdesign.com.au/floatutorial/tutorial0407.htm