min-width

[pary_daryayi 181]

سلام دوستان .

min-width مثل min-height عمل نمیکنه .

min-height اگر ابتدا مقدار 100 پیکسل داشته باشه , در صورتی زیاد میشه که محتوای داخلش بیش از 100 پیکسل باشه .

اما min-width اگر در ابتدا بهش بدیم 100 پیکسل , از همون اول , چه داخلش محتوا زیاد باشه چه کم , تمام عرض مرورگر رو پر میکنه.

اگه بخوایم همراه با عرض نوشته ی داخلمون , width زیاد بشه باید چکار کنیم ؟

<div class="div8">
<p> hellooooooooooooooo htmllllllllllllllllllllllll </p>
</div>

css :

.div8{
min-width:100px;
height:100px;
background-color:#E68A2E;
}

ممنونم.

ویرایش شده شهریور 92 توسط pary_daryayi

[مرتضی نظری 4182]

سلام

نمیدونم شاید من بلد نباشم.. ولی تا انوجایی که من میدونم max بودا... چون min اگر معنی هم بده معنی اون میشه از 100 پیکسل بزرگتر باشه!! فکر نکمن معنی بده!!! یا اصلا چنین چیزی وجود داشته باشه

شما اینو تست کنید، فکر کنم جواب بده بهتون... نیازی هم فکر نکنم به min یا max باشه...

.div8{
width:100px;
height:100px;
background-color:#E68A2E;
}

[pary_daryayi 181]

مرسی . min هم وجود داره :

اینجا

کد شما باعث میشه , نوشته از دایو بزنه بیرون .

ببینید :

ویرایش شده شهریور 92 توسط pary_daryayi

[Pouya 1102]

سلام. از padding استفاده كنيد. اين كد رو به استايل همون قسمت اضافه كنيد:

padding-left: 10px;

[مرتضی نظری 4182]

متشکر از پویای عزیز، کد دقیق تر میشه این:

max-width:150px;
background-color:#E68A2E;
padding: 10px 10px 10px 10px;

ویرایش شده شهریور 92 توسط مرتضی نظری

[imanfakhar 26231]

برای اینکه متنتون از کادر خارج نشه از خاصیت overflow:hidden استفاده کنید

[سعید شعبانی 2047]

چون المانی که شما می خواهید استفده کنید یک المان block هست تمام عرض صفحه رو می گیره پس شما باید از min و max با هم استفاده کنید. با min کمترین مقدار المان را تعیین کنید و با max هم حداکثر مقدار المان را تا عرض المان به اندازه عرض کل صفحه نشه. برای راحتی کار هم می تونید از درصد استفاده کنید

[مرتضی نظری 4182]

سعید جان من دقیقا متوجه نشدم که چرا باید از min هم استفاده کنه؟

[سعید شعبانی 2047]

سعید جان من دقیقا متوجه نشدم که چرا باید از min هم استفاده کنه؟

برای اینکه وقتی هیچ محتوایی داخلش نیست هم یک عرضی داشته باشه. اگر هم می خواهند فقط زمانی که محتوا داشت عرض داشته باشه min را هم بردارن

[Mohammad 1620]

.div8{
max-width:100px;
width: auto;
height:100px;
background-color:#E68A2E;
}

[pary_daryayi 181]

این نتیجه نداد

.div8{
max-width:100px;
width: auto;
height:100px;
background-color:#E68A2E;
}

-----------------

.div8{
min-width:100px;
max-width:500px;
height:100px;
background-color:#E68A2E;
overflow:hidden;
}

این کد هم تلفیقی از راهنمایی آقای فخار و آقای شعبانی بود .

نتیجه نداد . با overflow:visible و auto هم امتحان کردم.

---------------------

به یه نتیجه ای رسیدم ( البته شاید نادرست )

این کار برای height به راحتی انجام میشه , ولی انگار برای width از لحاظ منطقی این کار اشتباهه .

چون ما نباید اجازه بدیم width مون بصورت اتوماتیک و غیرقابل کنترل افزایش پیدا کنه , چون در این صورت عرض مرورگر اسکرول میخوره .

برای این کار وقتی overflow رو برابر auto گذاشتم , باعث میشه خود دایو یک اسکرول بخوره و مابقی رو پایین نشون بده .

دوستان اگه نتیجه گیریم نادرسته بگید لطفا

--------------------

پ.ن : من نمیخواستم اینو تو طرح یا پروژه ای پیاده کنم , فقط داشتم این صفت ها رو امتحان میکردم ... الان که فکرشو میکنم به نظر کاربردی نمیاد ...!!

-------------------

ویرایش شده شهریور 92 توسط pary_daryayi

[imanfakhar 26231]

هر کدی کاربردیه ولی باید در محل خودش استفاده شه

[مرتضی نظری 4182]

سلام

عزیز تلفیقی از کد من و محمد بزن ببین کارت درست میشه... بدون اینکه از کادر بزنه بیرون.. من خودم تست کردم جواب هم داد...

.div8{
max-width:100px;
width: auto;
height:auto;
background-color:#E68A2E;
padding: 10px 10px 10px 10px;
}

خب الان این کد کجاش مشکل داره؟ درضمن به صورت عادی از کادر هم بیرون نمیزنه، مگر اینکه یک کلمه خیلی بزرگ باشه... که بعیده چنین کلمه ای وجود داشته باشه...

[pary_daryayi 181]

این کد به خاطر height:auto درست کار میکنه و از دایو بیرون نمیزنه . من فقط میخواستم کاربرد min-width رو بدونم که داستان به این جاها رسید . چون min-width شبیه min-height عمل نمیکنه .

[imanfakhar 26231]

کاربرد min-width وقتی روی div مشخص می شود که div در خاصیت display:inline-block یا float:right/left باشد فرض کنید یک div دارید که محتویات داخلش متغیر است و float شده به سمت چپ شما می خواهید حتی اگر هیچ محتوایی نداشت بهخ اندازه یک مربع با عرض 100 دیده شود ولی اگر محتوا داشت به اندازه محتوا عرضش تغییر کند استایل این div می شود

div {
float:right;
width:auto;
min-width:100px;
}

این نمونه را هم ببینید

http://jsfiddle.net/gTeFg/