قرار دادن چند div در کنار هم چهارشنبه, 05 ارديبهشت 13970نظر

چیدمان افقی  چند 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>

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

 
 
   
 
   
 
   
 
   
 
   

نظرات

نظر خود را اضافه کنید