• 1 رای - 2 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
مشکل استفاده از float
#1
یه موضوع دیگه در مورد float کردن یک شیء یا یک تگ مثل div هست .

شاید تا حلا از این خاصیت css زیاد استفاده کرده باشین ولی من میخوام در مورد این خاصیت یه نکته مهم بگم .

float کردن یک عنصر ان را از جریان کلی سند خارج و اگر بعد از ان یک عنصر block-level باشد ان نیز عنصر شناور شده را نادیده میگیرد .

یه مثال میزنم تا با امتحان اون متوجه جریان بشین .
کد:
<style>
   #number1{
      width:800px;
      height:200px;
      border:1px solid #FF0000;
      float:left;
   }
   #number2{
  
      width:400px;
      height:200px;
      border:2px solid #0000FF;
  
  
   }
</style>
</head>

<body>
   <div id="number1">div 1 with float=left</div>
  
   <div id="number2">div 2 without float</div>
</body>

خوب با اجرای این کد می بینید که دو تا div روی هم می افتن و حلا راه حل چیه .

بعد از استفاده از float بایداز خاصیت clear استفاده کرد تا محدوده ی شیء شناور مشخص بشه .

میشه این کار رو به صورت زیر انجام داد

کد:
<style>
   #number1{
      width:800px;
      height:200px;
      border:1px solid #FF0000;
      float:left;
   }
   #number2{
  
      width:400px;
      height:200px;
      border:2px solid #0000FF;
  
  
   }
</style>
</head>

<body>
   <div id="number1">div 1 with float=left</div>
   <div style="clear:left"></div>
   <div id="number2">div 2 without float</div>
</body>
  پاسخ
تشکر شده توسط : Alimokhlesi amir.s
#2
یه کار دیگه هم می شه کرد
اگه به شماره 2 خاصیت Float:left رو هم اضافه کنی باز این اتفاق نمی افته.

که البته این بستگی به اندازه شماره 1 داره.

در کل اون کاری که شما می گین بهتره و مطمئن تر
سپاس
همه جوره اش رو داریم ظاهرن
  پاسخ
تشکر شده توسط :
#3
حق با شماست ولی با اینکار ممکنه از وسط margin بخوره .

در کل بستگی به شکلی داره که در نظر دارین به وجود بیارین .

ولی میشه هر دو راه رو جایگذین هم کرد .
  پاسخ
تشکر شده توسط :
#4
چرا opera, FF, chrome اینو درست نمایش می دن ولی IE گند می زنه؟؟؟؟
چی کار کنم که درست بشه؟

کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
@charset "utf-8";
/* CSS Document */

body
{
    font-family:tahoma, arial;
    font-size:11px;
    font-style:normal;
    font-weight:normal;
    color:#003366;
    margin:0px;
    background-color:#e9eef7;
    
    
}


#leftmenu
{
    width:180px;
    float:left;
    margin:10px;
}

#rightmenu
{
    width:180px;
    float:right;
    margin:10px;
}
#bodyart
{
    float:left;
    width:540px;
    margin-top:10px;
    border:1px #000000 solid;
    
}

div
{
    border:1px solid #000000;
}
</style>
</head>

<body>
<table width="952" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td scope="col">
    <div id="leftmenu">left</div>
    <div id="bodyart">asd</div>
    <div id="rightmenu">right</div>
    </td>
  </tr>
</table>

</body>
</html>

درست شد
فهمیدم مشکل از کجا بود
از اون xmlns که در واقع تعیین می کنه که html شما xhtml باشه
اونو که حذف کردم تقریبا همشون یکی شدن.
دی
همه جوره اش رو داریم ظاهرن
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان