خودتان امتحان کنید

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
* {
  box-sizing: border-box;
}

.img-container {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>قرار گرفتن تصاویر در کنار یکدیگر</h2>
<p>شناور کردن تصاویر در کنار یکدیگر</p>

<p>توجه کنید که ما از هک clearfix برای اطمینان از جریان چینش استفاده کرده ایم، و اینکه ما از ویژگی box-sizing برای اطمینان از اینکه عنصر دربردارنده، به خاطر padding اضافی، نمی شکند، استفاده کرده ایم. سعی کنید این کد را حذف کنید تا تاثیر را مشاهده کنید. </p>

</body>
</html>