0

私は画像ギャラリーを作成していて、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>

ths 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を個別に配置する必要があることですが、これに対する回避策はありますか？

ありがとう ：）

4

1 に答える 1

0

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をご覧ください。

于 2012-06-08T12:11:48.130 に答える