1

私はhtmlが初めてです。HTMLを使用して画像を並べて表示しようとしています。

次のコードを使用して知っていました：

<div style="float:left;"> 
    <img alt="logo" src="images/logo.gif" /> 
    <img alt="background" src="images/bkgd.gif" /> 
</div>

すべての img タグは div タグにあります。

しかし、私のコードでは、さまざまな画像に対してさまざまな div タグを使用しています。

<div style="float:left;">
<li class="gallerybox" style="width: 185px">
    <div style="width: 185px">
        <div class="thumb" style="width: 180px;">
            <div style="margin:19.5px auto;">
                <a href="http://en.wikipedia.org/wiki/File:Marathahalli.jpg" class="image"><img alt="" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Marathahalli.jpg/150px-Marathahalli.jpg" width="150" height="91"></a>
            </div>
        </div>
        <div class="gallerytext">
            <p>View of Outer ring road from Marathahalli bridge</p>
        </div>
    </div>
</li>
<li class="gallerybox" style="width: 185px">
    <div style="width: 185px">
        <div class="thumb" style="width: 180px;">
            <div style="margin:15px auto;">
                <a href="http://en.wikipedia.org/wiki/File:Marathahalli_ring_road_side_view_8140.JPG" class="image"><img alt="" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Marathahalli_ring_road_side_view_8140.JPG/133px-Marathahalli_ring_road_side_view_8140.JPG" width="133" height="100"></a>
            </div>
        </div>
        <div class="gallerytext">
            <p>Marathahalli ORR</p>
        </div>
    </div>
</li>
<li class="gallerybox" style="width: 185px">
    <div style="width: 185px">
        <div class="thumb" style="width: 180px;">
            <div style="margin:15px auto;">
                <a href="http://en.wikipedia.org/wiki/File:Marathahalli_ring_road_side_view_8138.JPG" class="image"><img alt="" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Marathahalli_ring_road_side_view_8138.JPG/133px-Marathahalli_ring_road_side_view_8138.JPG" width="133" height="100"></a>
            </div>
        </div>
        <div class="gallerytext">
            <p>Marathahalli ORR side snap</p>
        </div>
    </div>
</li>
<li class="gallerybox" style="width: 185px">
    <div style="width: 185px">
        <div class="thumb" style="width: 180px;">
            <div style="margin:15px auto;">
                <a href="http://en.wikipedia.org/wiki/File:Marathahalli_ring_road_side_view_8151.JPG" class="image"><img alt="" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Marathahalli_ring_road_side_view_8151.JPG/133px-Marathahalli_ring_road_side_view_8151.JPG" width="133" height="100"></a>
            </div>
        </div>
        <div class="gallerytext">
            <p>Innovative multiplex theater</p>
        </div>
    </div>
</li>
<li class="gallerybox" style="width: 185px">
    <div style="width: 185px">
        <div class="thumb" style="width: 180px;">
            <div style="margin:15px auto;">
                <a href="http://en.wikipedia.org/wiki/File:Marathahalli_ring_road_side_view_8149.JPG" class="image"><img alt="" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Marathahalli_ring_road_side_view_8149.JPG/133px-Marathahalli_ring_road_side_view_8149.JPG" width="133" height="100"></a>
            </div>
        </div>
        <div class="gallerytext">
            <p>Aisshwaria Opulance Apartment at Marathahalli ring road</p>
        </div>
    </div>
</li>
</div>

私を助けてください。

4

2 に答える 2

2

これを試して：

li {
    float: left;
}
于 2013-02-25T07:49:49.133 に答える
1

私はあなたがあなたのコードに何をさせたいのか実際には理解していません。しかし、それでも私はこれがあなたを助けるかもしれない（そうでないかもしれない）と思います。（インラインではなくクラスと内部CSSスタイルを使用してください）

<div class='img-container'>
<img src='image.jpg'/>
<img src='image2.jpg'/>
</div>

そして、画像を並べて表示するためのCSS：

.img-container img {
display:inline-block;
width:100px; /* or whatever you want*/
height:100px; /* same as above */
}

これがあなたが探しているものではない場合は、フィドルを作成し、リンクで質問を更新してください。

于 2013-02-25T07:56:13.037 に答える