نمایش نسخه قابل چاپ
سلام دوستان عزیز
من میخوام 4 تا DIV را که در کنار هم هستند را طول هاشون را با هم تنظیم کنم
یعنی اگر محتوای یکیشون زیاد بود و یکیشون کم بود Height همشون با هم برابر باشه
درست کاری که با جدول انجام میشه ولی من نمیخوام از جدول استفاده کنم
دوستان میشه راهنمایی کنید چکار میتونم بکنم؟
ممنون
در این باره از تکنینک های CSS باید استفاده کنی ، به عنوان مثال
یک کلاس واحد برای همه div ها و id های متفاوت برای گذاشتن خصوصیات جدا برای هر div استفاده کنید.
من اگر به DIV ها طول بدم بعداً اگر تعداد خط ها داخل سیستم های مختلق متفاوت باشه یا بهتر بگم عرض صفحه کم باشه از اون مقداری که برای height تعریف کردم میره بیرون !
کاری که شما باید انجام بدید به این صورت هست:
1- یک div کلی برای چهار div درست کنید طوری که اون 4 تا درون div کلی باشند.
2- می تونید مقدار height دیو کلی رو متغییر کنید.
3- میزان ارتفاع بقیه div ها را بر اساس div کلی تعیین کنید.
منظورتون اینه که به div کلی بدم 100px?
من دخل قالب همه عرض ها را به درصد دادم که اسکرول نخوره
برای همین width متغیر هست ! و نمیتونم مقدار بدم
شما باید یک width دیفالت قرار بدید که سایت از یک مقدار کوچکتر نشود و
برای height هم باید بر اسا اون div کلی که هر div دیگری می تواند ارتفاع آن را تغییر دهد و بقیه div ها وظیفه دارند که ارتفاعشان با کمی فاصل به اندازه div کلی باشد
من این کار رو کردم
به این صورت که یک div ساختم و داخلش div ها را قرار دادم و div های داخلی را ارتفاعشون را به div اصلی تنظیم کردم ولی انجام نشد ! و مثل این بود که کلا ارتفاعی وجود نداره !!
محتویات داخل div ها چی هستند؟
فقط متن
با چه دستوری متن ها را وارد کرده اید؟
<p>
چه style برو تگ p قرار داده اید؟
لطفا کده ها یا عکس اون رو قرار بدین
این کل کد هستکد:<div>
<h3 style="width:40%;float:right;background-color:blue;height:inherit;">سرویس میزبانی لینوکس جهت ارائه به سایت های پربازدید و روی کنترل پنل cPanel در داخل و خارج از کشور اماده ارائه میباشد، توجه داشته باشید انتخاب هاست لینوکس هیچگونه ارتباطی با سیستم عامل کامپیوتر شما ندارد و سادگی و قدرت آن نسبت به هاست ویندوز از مزیتهای آن است. </h3>
<h3 style="width:40%;float:right;background-color:yellow;height:inherit">dd</h3>
</div>
Up :|
این کد رو برای شما نوشتم:نقل قول:
نوشته اصلی توسط bax998
کد PHP:<div style="width:700px;margin:5px;padding:5px;" dir="rtl"; align="center">
<div id="1" style="float:right; width:23%; padding:3px; margin:3px;">جدول یک</div>
<div id="2" style="float:right; width:23%; padding:3px; margin:3px;">جدول دو</div>
<div id="3" style="float:right; width:23%; padding:3px; margin:3px;">جدول سه</div>
<div id="4" style="float:right; width:23%; padding:3px; margin:3px;">جدول چهار</div>
</div>
دوست عزیز فکر کنم متوجه نشدید منظور من رو
من میخوام height همه div ها برابر باشه !! چون میخوام بک گراند قرار بدم و اگه هر کدوم یه اندازه باشه خراب میشه
این کدی که من نوشتم همگی برابر هست وقتی هم داخلش تایپ کنید بزرگ یا کوچیک نمیشه. اگر div اولی رو درصد قرار بدید کوچیک بزرگ میشه فقط اگر همینططوری که من نوشتم قرار بدید نمیشهنقل قول:
نوشته اصلی توسط bax998
من دقیقاً از همین کد استفاده کردم وقتی نوشته های یکی زیاد تر میشه اندازه بقیش همون میمونه و اون یه دونه بزرگ میشه
راحت ترین و بهترین راه برای انجام اینکار استفاده از JavaScript و Jquery هست.
من کوتاهترین تابع رو نوشتم براتون :
- توجه داشته باشید که اونهایی که میخواید یک height داشته باشند باید یک class مشترک داشته باشند که اینجا اسمش رو elements گذاشتم.کد HTML:<script>
$(document).ready(function()
{
$.fn.equalize = function()
{
this.height(Math.max.apply(this, $.map(this, function(e) {
return $(e).height();
})));
};
$('.elements').equalize();
});
</script>
<div>
<h3 class="elements" style="width:40%;float:right;background:blue">سرویس میزبانی لینوکس جهت ارائه به سایت های پربازدید و روی کنترل پنل cPanel در داخل و خارج از کشور اماده ارائه میباشد، توجه داشته باشید انتخاب هاست لینوکس هیچگونه ارتباطی با سیستم عامل کامپیوتر شما ندارد و سادگی و قدرت آن نسبت به هاست ویندوز از مزیتهای آن است. </h3>
<h3 class="elements" style="width:40%;float:right;background:yellow">dd</h3>
</div>
- تابع equalize رو باید در یک جا کپی کنید و هر باری که میخواید element هاتون رو equal height کنید تابع رو به این صورت call کنید :
کد HTML:$('.class-name').equalize();