position یک div در td

G

g2eenday

New Member
سلام به همگی
یه سوال داشتم اگه جواب بدید خیلیی ممنون می شم :oops:

فرض کنیم یه table با 3 تا ردیف داریم که در ردیف دوم می خوایم یک div جاساز کنیم! که هر وقت متنی توی ردیف دوم نشته شد (خارج div ولی توی ردیف 2) یا کلی خط خالی بوجود اومد باز div به ته ردیف دوم بچسبه! ( لپ کلام! می خوام یه div توی ردیف دوم یه table همیشه تهش بچسبه)!
ممنون می شم! من تازه استخدام شدم نباس کم بیارم، لطفا کمک!
اینم برای شما استاد عزیز که جواب مارو میدی :rose:
 
pouya saadeghi

pouya saadeghi

Active Member
ببخشيد كه متوجه نشدم!
ميخواين" div‏ به ته رديف دوم بچسبه" يعنى چى؟
يعنى به طرف راست سلول بچسبه؟ يا چپ؟
اونوقت ‏ div‏ شما width‏ ثابت داره؟
 
G

g2eenday

New Member
جواب

منظورم اینه: یه تیبل 3 ردیفه با عرض 100% و ارتفاع متغییر فرض کنید، حالا توی ردیف دوم ما کلی متن داریم (یعنی tr دوم)، حالا من می خوام یک div هم توی ردیف دوم باشه ولی به انتهای ردیف دوم بچسبه یعنی buttom صفر باشه و از دو طرف راست و چپ به td چسبیده باشه. و هر موقع ارتفاع ردیف دوم کوچیک و بزرگ میشه باز div به آخر ردیف دوم پسبیده باشه

مرسی شرمنده اگه خوب توضیح نمی دم :green:
 
pouya saadeghi

pouya saadeghi

Active Member
این مشکل با یه vertical-align برای td حل میشه:
HTML: 
<!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>
td{background:#CCCCCC;}

#my_td{vertical-align:bottom;}

#a{margin-bottom:0; background:#666666;}
#b{margin-bottom:0; background:#FF0000;}


</style>
</head>

<body>
<table width="403" height="449" border="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td id="my_td">changable text<br>changable text<br>changable text<div id="b">text<br></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
 
G

g2eenday

New Member
مرسی از جواب

از پاسخ شما ممنونم دوست عزیز :rose:

و اینکه منم گشتم و پرسیدم به این نتیجه رسیدم که از کد زیر هم می شه به جواب رسید :oops:

کد: 
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
    background-color: #800000;
}
div{
    width:100%;
}
</style>
</head>

<body>

<table class="style1" style="width: 100%">
    <tr>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>
            <div style="position:relative;">
                Text Text Text <br />
                Text Text Text <br />
                Text Text Text <br />
                Text Text Text <br />
                Text Text Text <br />                                                                
                <div style="position:absolute;bottom:0;background-color:aqua;">Hello Hello</div>
            </div>
        </td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>

</body>

</html>
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا