0

画像のグリッドを構築しようとしています。要素は相対的に配置されているため、 float: left はそれらを積み重ねないようです。これを行うより良い方法はありますか？コードは次のとおりです。

CSS:

#master {

    width: 940px;
    outline: solid 1px #000;

}

#img_grid1 h2 {

    font-family: Tahoma, Geneva, sans-serif;
    position: relative;
    font-size: 16px;
    top: 50px;
    left: 20px;
    color: #000;
    z-index: 20;
    width: 100px;
}



img.off {

    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;

}

img.on {

    position: absolute;
    left:0; top: 0;

}

ul#img_grid1 { position: relative; }

ul#img_grid1 li {

    position: relative;
    list-style-type: none; 


}

.copy { 

    position: relative; 
    width: 200px; 
    top: 70px; 
    left: 40px;

}

.copy p { color: #FFF; }

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

HTML:

<div id="master">

<br />

<ul id="img_grid1">

  <li><a href="#" style="text-decoration: none;"><img class="off" src="images/img1.jpg" alt=""/><img class="on" src="images/img1over.jpg" alt=""/><h2>Heading 1</h2><div class="copy"><p>Love walking? Check out our fantastic range of quality walking gear. Plus... find out more about our FREE boot fitting service or check our brand new gear guide.</p></div>
 </a></li>
 <li><a href="#" style="text-decoration: none;"><img class="off" src="images/img1.jpg" alt=""/><img class="on" src="images/img1over.jpg" alt=""/><h2>Heading 1</h2><div class="copy"><p>Love walking? Check out our fantastic range of quality walking gear. Plus... find out more about our FREE boot fitting service or check our brand new gear guide.</p></div>
 </a></li>


</ul>

可能かどうかはわかりません。要素をフローティングしようとしましたが、うまくいきませんでした。

4

1 に答える 1

1

使い方liを並べるdisplay: inline-block;

デモ

CSS

ul {
    width: 1000px;
}

ul li {
    display: inline-block;
    margin: 10px;
    border: 1px solid #000;
}

HTML

<ul>
    <li><img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /></li>
    <li><img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /></li>
    <li><img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /></li>
</ul>
<ul>
    <li><img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /></li>
    <li><img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /></li>
    <li><img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /></li>
</ul>
于 2013-02-08T13:35:18.013 に答える