وابسته بودن div ها به هم!

[salehbagheri]

سه تا div به صورت افقي در كنار هم داريم. آيا امكانش هست كه ارتفاع اونها را به هم وابسته كنيم؟

مثلاً در جداول اين ويژگي به صورت اتوماتيك وجود داره. يعني يكي از سلولها تغيير ارتفاع بده سلول هاي افقي اون نيز به همون اندازه تغيير ارتفاع ميدن!

آيا اين امكان در div ها وجود داره يا خير؟

[Keramatifar]

دوست عزیز
شما میتونی به هر 3 تا div مقدار height=100% بدی و اونارو بذاری داخل یک div بعنوان parent با height=auto
راه های دیگه ای هم هست ولی سری که درد نمیکنه ...

[salehbagheri]

نه برادر كرامتي به همين راحتي ها كه فكر ميكنيد نيست!
چون اگه متن كم يا زياد بشه، قاطي ميكنه!

ولي به هرحال جوابش رو يافتم (display)

Html Code :


<div id="container">
<div id="row">

<div id="left">
<h4>Left Col</h4>
<p>...</p>
</div>

<div id="middle">
<h4>Middle Col</h4>
<p>...</p>
</div>

<div id="right">
<h4>Right Col</h4>
<p>...</p>
</div>

</div>
</div>


Css Code :


#container {
display: table;
}

#row {
display: table-row;
}

#left, #right, #middle {
display: table-cell;
}


اينم دمو:
http://snook.ca/technical/div_tables/

[alireza_s_84]

نه برادر كرامتي به همين راحتي ها كه فكر ميكنيد نيست!
چون اگه متن كم يا زياد بشه، قاطي ميكنه!
ولي به هرحال جوابش رو يافتم (display)

خب من دیر رسیدم ولی پاسخ جناب کرامتی با پاسخ شما کامل میشه. پاسخ جناب کرامتی برای مرورگر IE مناسبه ولی راه حل شما حتی توی IE8 هم جوابگو نیست چون این مرورگر(لعنت الله علیه) از خصوصیت display:table و سایر ملحقات پشتیبانی نمیکنه و فقط توی IE9 میشه از این روش استفاده کرد لذا با ترکیب هر دو پاسخ میشه به یک راه حل cross-browser رسید.
وقتی به خصوصیت display توی w3c نگاه میندازیم این پیغامش نشان از عقب موندگی IE میده:

The display property is supported in all major browsers.
Note: No versions of Internet Explorer (including IE8) support the property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", or "table-row-group".
الا لعنت الله علی آل IE.

[salehbagheri]

خب من دیر رسیدم ولی پاسخ جناب کرامتی با پاسخ شما کامل میشه. پاسخ جناب کرامتی برای مرورگر IE مناسبه ولی راه حل شما حتی توی IE8 هم جوابگو نیست چون این مرورگر(لعنت الله علیه) از خصوصیت display:table و سایر ملحقات پشتیبانی نمیکنه و فقط توی IE9 میشه از این روش استفاده کرد لذا با ترکیب هر دو پاسخ میشه به یک راه حل cross-browser رسید.

چطور جواب گو نيست در حالي كه من الان دارم با IE6 , 8 به صفحه دموي پست قبلي ام نگاه ميندازم و همه چي سر جاشه؟

[alireza_s_84]

چطور جواب گو نيست در حالي كه من الان دارم با IE6 , 8 به صفحه دموي پست قبلي ام نگاه ميندازم و همه چي سر جاشه؟
یعنی شما توی IE6 اون دمو رو درست میبینید؟؟؟؟ امکان نداره چون من با IE7 دیدم و علاوه بر اون شاید در IE8 درست نشون داده بشه چون من تست نکردم ولی طبق گفته خود W3C که توضیح دادم این مقادیر برای خاصیت display ساپورت نمیشه حتی در IE8.
مطمئنا اگر ساپورت میشد دیگه چرا همه با Table قالب بندی میکردن؟؟؟
http://www.w3schools.com/css/pr_class_display.asp
لینک بالا رو حتما یک نگاهی بندازید
موفق باشید

[emad_67]

یعنی شما توی IE6 اون دمو رو درست میبینید؟؟؟؟ امکان نداره چون من با IE7 دیدم و علاوه بر اون شاید در IE8 درست نشون داده بشه چون من تست نکردم ولی طبق گفته خود W3C که توضیح دادم این مقادیر برای خاصیت display ساپورت نمیشه حتی در IE8.

توی ie 8 مشکلی نداره و درست نشون داده میشه. اما ie 6 ساپورت نمی کنه.
راه دیگه ای که وجود داره برای اینکار اینه:


<div id="container">
<div id="left">
<h4>Left Col</h4>
<p>...</p>
</div>

<div id="middle">
<h4>Middle Col</h4>
<p>...</p>
</div>

<div id="right">
<h4>Right Col</h4>
<p>...</p>
</div>
</div>



<style type="text/css">
div
{
border: 1px solid #000;
}
#container {
overflow: hidden;
}
#left, #right, #middle {
float: left;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
</style>

[salehbagheri]

راه دیگه ای که وجود داره برای اینکار اینه:

راه شما رو امتحان كردم ولي يه چيز درهمي از آب در اومد كه نبينيد بهتره! :لبخند:

خب دوباره مشكلم رو شرح ميدم كه شايد جوابهاي بهتري بگيرم

1. به اين صورت محتويات رو ميچينم:
http://barnamenevis.org/forum/attachment.php?attachmentid=50410&stc=1&d=1275592332

2. اما نتيجه اين ميشه:
http://barnamenevis.org/forum/attachment.php?attachmentid=50411&stc=1&d=1275591892

3. در حالي كه اين تصوير مد نظرم هست:
http://barnamenevis.org/forum/attachment.php?attachmentid=50412&stc=1&d=1275591892

يعني اگه Div2 در اثر اضافه شدن متن يا عناصر ديگه تغيير ارتفاع داد، Div1 هم به همون اندازه تغيير ارتفاع بده! اين موضوع با Table ها اصلا به وجود نمي ياد!

استايل div ها هم به اين صورت هست:
Div1


{
float:left;
background-color:Yellow;
height:100%;
width:250px;
}


Div2


{
float:right;
background-color:Green;
height:100%;
width:250px;
}


فايل html رو هم ضميمه كردم تا ببينيد!

[emad_67]

راه شما رو امتحان كردم ولي يه چيز درهمي از آب در اومد كه نبينيد بهتره! :لبخند:
شما با چه مرورگر امتحان کردی؟
من با ie8, chrome, firefox, safari تست کردن و همین نتیجه ای که شمای مخوای رو میده.

[salehbagheri]

شما با چه مرورگر امتحان کردی؟
من با ie8, chrome, firefox, safari تست کردن و همین نتیجه ای که شمای مخوای رو میده.

من چند بار امتحان كردم نشد چون داخل تگهاي div چيزي قرار نداده بودم و فقط به مقدار دهي Height بسنده كرده بودم و هيچي پديدار نميشد.
اما الان كه متني رو واردش كردم درست نمايش ميده.

اما اين روش از لحاظ كد نويسي كمي عجيب به نظر ميرسه!
چرا padding-bottom رو 2000 پيكسل قرار داديد؟ اگه كمتر باشه چي ميشه؟
اين يك باگ به حساب نمي ياد؟

[emad_67]

اما اين روش از لحاظ كد نويسي كمي عجيب به نظر ميرسه!بله استفاده از همون display: table راه درست تر و منطقی تری هست. اما این رو هم چون قبلا دیده بودم به عنوان یک راه مطرح کردم.

چرا padding-bottom رو 2000 پيكسل قرار داديد؟ اگه كمتر باشه چي ميشه؟مهم نیست حتما 2000 پیکسل باشه. اما باید ارتفاع div رو به قدری زیاد کنه که ارتفاع اون div از محدوده div بیرونی خارج بشه. مثلا فرض کن مقدار padding-bottom: 300px و margin-bottom: -300px
بدیم، وقتی مقدار متن در یکی از div ها زیاد بشه، اختلاف ارتفاع بین div ها کاملا قابل مشاهده هست.
در واقع می خوایم میزان ارتفاع div ها رو تا حدی زیاد کنیم که با overflow ئه div بیرونی بتونیم ارتفاع سه div رو یکسان نشون بدیم. این مورد رو فکر کنم چند بار با مقادیر مختلف تست کنی متوجه بشی.

[salehbagheri]

آقای emad_67 امکانی داره که این div ها رو که روش شما چیده میشه، وسط تصویر قرار داد؟

من هر روشی رو که برای وسط چین کردنش لازم بود انجام دادم ولی متأسفانه نشد.

[emad_67]

آقای emad_67 امکانی داره که این div ها رو که روش شما چیده میشه، وسط تصویر قرار داد؟

من هر روشی رو که برای وسط چین کردنش لازم بود انجام دادم ولی متأسفانه نشد. برای تک تک div های داخلی که خوب با توجه به float ئی که وجود داره نمیشه وسط چین کرد مگه اینکه به صورت دستی تک تک div ها رو با margin موقعیت دهی کرد.
اما می تونید به هر کدوم از div ها یه عرضی رو بدید و بعد div بیرونی رو وسط چین کنید:


<style type="text/css">
div
{
border: 1px solid #000;
}
C#‎ontainer {
overflow: hidden;
width: 306px;
margin: 0 auto;
}
#left, #right, #middle {
float: left;
width: 100px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
</style>
به هر کدوم عرض 100 پیکسل رو دادم و به div بیرونی هم عرض 306 و بعد اونو وسط قرار دادم.

[binyaft]

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