قرار دادن چند div در کنار هم

مدیر داده ها 0001// 88

چیدمان افقی  چند div  در  HTML  با روشهای مختلفی صورت میگیرد از جمله استفاده از خاصیت Flex  در استایل (style) تگ parent  است . در این روش کافی است در بخش استایل تگ parent کد display : flex  قرارداده شود : به کد زیر توجه نمایید :

 

<html>
<head>
<style>
#main {
    width: 350px;
    height: 100px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>
</body>
</html>

نتیجه آن به صورت زیر است

 
 
   
 
   
 
   
 
   
 
   

آخرین آموزشها

  • چیدمان عکس و متن در کنار هم

    گاهی اوقات بعنوان مدیر محتوای وب سایت میخواهید که در صفحه یک تصویر  را در کنار نوشته ها قرار دهید بخوانید
  • ساخت منو افقی

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

    بخوانید
  • قرار دادن چند div در کنار هم

    چیدمان افقی چند div در HTML با روشهای مختلفی صورت میگیرد از جمله استفاده از خاصیت Flex در استایل (style) تگ parent است .

    بخوانید

طراحی وب

تا کسب موفقیت همراه شما هستیم.
در صورت درخواستهای خاص با ما تماس بگیرید .

  • تماس با شرکت آرادین پرداز 88985292(021)
  • تماس با شرکت آرادین پرداز info@araadin.com