HTML中的圖片位置，任何人都知道？

-1

我是新來的HTML。我有這樣的代碼，這使得9個picutres與HTML：HTML中的圖片位置，任何人都知道？

<a href=""><img src="fotos/photo.jpg" style="width: 160px; height: 160px;"></a>

我不知道我怎樣才能使這些圖片是這樣的：

https://gyazo.com/cde734a459da86698fcb60363cdea272

使用這個或者那個中的框架會更好嗎？ HTML？

來源

2017-09-25 thomasoverflow

使用CSS，你可以做到這一點......但也看看https://getbootstrap.com –

你必須更好地描述你想要的內容，但[這裏有一個想法]（https://css-tricks.com/seamless-responsive-photo-grid/）。並且可能有其他人更接近您在該網站上的要求。 –

[如何在HTML/CSS中製作3列完全響應的圖像網格？]（https://stackoverflow.com/questions/15550974/how-to-make-a-3-column-fully-responsive- image-grid-in-html-css） –

您可以使用彈性盒。請參閱示例：

<html> 
<style> 
.container{ 
display:flex; 
flex-wrap:wrap; 
width:100vw; 

} 

.image{ 
display:flex; 
width:33.3vw; 
} 
</style> 

<div class="container"> 
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div> 
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div> 
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div> 
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div> 
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div> 
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div> 
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div> 
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div> 
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div> 
</div> 
</html>

來源

2017-09-25 07:32:10

這個作品謝謝！ – thomasoverflow

使用display flex。

CSS

.container { 
    width: 600px; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-evenly 
}

HTML

<div class="container"> 
    <a href=""><img src="fotos/photo.jpg" style="width: 160px; height: 160px;"></a> 
    <!-- 9 times --> 
</div>

繼承人jsfiddle

來源

2017-09-25 07:34:33 ZeWebDev

HTML中的圖片位置，任何人都知道？

回答

相關問題