[Bootstrap4] Side-by-Side Image Gallery
익명
2020.04.17 09:20
6,471
0
-
- 첨부파일 : Images_Side_by_Side.jpg (101.9K) - 다운로드
-
1838회 연결
-
0회 연결
본문
Images Side by Side
How to create side-by-side images with CSS Flexbox:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with CSS Flexbox:</p>
<div class="row">
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
댓글목록 0