Float Images next to each other
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Float Images</title>
<style>
/* border-box allows to include padding & border in the box's total width (and height), making sure that the padding stays inside of the box and that it does not break. */
* {
box-sizing: border-box;
}
.clearFix {
overflow: auto;
}
.img-container {
float: left; /* will set the images next to each other */
width: 33.33%; /* three containers (use 25% for four, and 50% for two, etc) */
padding: 5px; /* for space between the images */
}
</style>
</head>
<body>
<h1>Demo: Float Images next to each other</h1>
<section class="clearFix">
<div class="img-container">
<img src="/notes/examples/assets/img/messi.png" alt="messi" style="width:100%">
</div>
<div class="img-container">
<img src="/notes/examples/assets/img/ronaldo.png" alt="ronaldo" style="width:100%">
</div>
<div class="img-container">
<img src="/notes/examples/assets/img/neymar.png" alt="neymar" style="width:100%">
</div>
</section>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit eveniet saepe consectetur repudiandae. Ducimus deleniti, officiis perferendis animi eius est doloremque optio, quis architecto iusto soluta dignissimos. Animi minus tenetur error porro dolorum atque nobis commodi, culpa velit beatae aperiam tempore debitis ipsum similique enim sequi officiis ab aliquam illum nulla sunt esse maiores, suscipit eum? Vitae atque iste perspiciatis. Doloribus esse eos ex. Inventore distinctio esse assumenda sed maxime eligendi sequi, numquam ipsa unde tempore beatae quos veritatis iusto quis rem reprehenderit accusantium in. Laudantium nihil tempore, necessitatibus repellat perferendis corporis in nobis quo fuga expedita non! Voluptas, magnam.</p>
</body>
</html>