html - 图片库定位

Question

我正在创建一个图片库，需要一些帮助 pn 定位。

我有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;
}

我的问题是我必须单独定位每个 div，是否有解决方法？

谢谢 ：）

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