آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش قرار دادن چند تصویر در کنار هم در سایت

آموزش CSS

آموزش قرار دادن چند تصویر در کنار هم در css


در این مقاله می آموزید که چطور با استفاده از CSS و Html تصاویر را در کنار یکدیگر قرار دهید.


قدم اول : کد HTML را اضافه کنید.
مثال :


Snow
 nature
Mountains

قدم دوم :   کد CSS را اضافه کنید.
چطور با استفاده از ویژگی float در CSS ، تصاویر را در کنار یکدیگر ایجاد کنیم:
مثال float :

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

/* Create three equal columns that sits next to each other */
.column {
  flex: 33.33%;
  padding: 5px;
}
                


نمونه مثال Float :

<h2>Images Side by Side</h2>
<p>چطور با استفاده از CSS و Html تصاویر را در کنار یکدیگر قرار دهید.</p>

<div class="row">
  <div class="column">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=img_snow_wide_1.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=img_nature_wide.jpg" alt=" nature " style="width:100%">
  </div>
  <div class="column">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=img_mountains_wide.jpg " alt="Mountains" style="width:100%">
  </div>
</div>
 

امتحان کنید

خروجی مثال Float  

آموزش
نحوه قرار گرفتن تصاویر کنار هم با ويژگي Float در CSS

مثال Flexbox :  چطور با استفاده از ویژگی flex در CSS ، تصاویر را در کنار یکدیگر ایجاد کنیم

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

/* Create three equal columns that sits next to each other */
.column {
  flex: 33.33%;
  padding: 5px;
}
                


نمونه مثال Flexbox :

<h2>Images Side by Side</h2>
<p>چطور با استفاده از CSS و Html تصاویر را در کنار یکدیگر قرار دهید.</p>

<div class="row">
  <div class="column">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=img_snow_wide_1.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=img_nature_wide.jpg" alt=" nature " style="width:100%">
  </div>
  <div class="column">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=img_mountains_wide.jpg " alt="Mountains" style="width:100%">
  </div>
</div>

امتحان کنید

خروجی مثال Flexbox  

آموزش
نحوه قرار گرفتن تصاویر کنار هم با ويژگي Flexbox در CSS

توجه :  Flexbox در مرورگر IE 10 و ورژن قدیمی تر آن قابل نمایش نیست. بستگی به نظر شما دارد که بخواهید از float یا flex برای ایجاد چیدمان سه ستونه استفاده کنید. بنابراین ، اگر بخواهید در مرورگر IE 10 یا ورژن های قدیمی تر آن نمایش داده شود ، باید از float استفاده کنید.


اضافه کردن قابلیت پاسخگویی ( واکنش گرا بودن )


به صورت اختیاری ، میتوانید از مدیا کوئری استفاده کنید تا تصاویر در یک صفحه با عرض مشخص ، بجای شناور شدن بدنبال هم ، در بالای یکدیگر بصورت ثابت قرار گیرند.


مثال زیر ، تصاویر را به شکل عمودی در صفحات با پهنای 500 پیکسل یا کمتر ، قرار میدهد.


مثال حالت واکنش گرا :

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
P{
text-align:right
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

                


نمونه مثال حالت واکنش گرا :

<h2>Responsive  Images Side by Side</h2>
<p>چطور با استفاده از CSS و Html تصاویر را در کنار یکدیگر قرار دهید.</p>

<div class="row">
  <div class="column">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=img_snow_wide_1.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=img_nature_wide.jpg" alt=" nature " style="width:100%">
  </div>
  <div class="column">
    <img src=" http://articles.tahlildadeh.com/image.axd?picture=img_mountains_wide.jpg " alt="Mountains" style="width:100%">
  </div>
</div>

امتحان کنید

مثال حالت واکنش گرا :  

آموزش
مثال حالت واکنش گرا  :
  • 27
  •    0
  • تاریخ ارسال :   1400/01/16

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .