如何在html中並排顯示圖像

我是html新手。我正在嘗試使用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>

請幫幫我。

來源

2013-02-25 Prasad G

你現在輸出的是什麼？ – asifsid88 2013-02-25 07:47:19

你能提供FIDDLE pls嗎？ – EnterJQ 2013-02-25 07:48:25

小提琴！請？ – 2013-02-25 07:49:44

試試這個：

li { 
    float: left; 
}

來源

2013-02-25 07:49:49

我真的不明白你希望你的代碼做什麼。但我仍然認爲這可能（可能不會）幫助你。（使用類和內部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 */ 
}

如果這是你正在尋找沒有什麼，那麼請創建fiddle並通過鏈接更新您的問題。

來源

2013-02-25 07:56:13

如何在html中並排顯示圖像

回答

相關問題