ورود

View Full Version : چینش یک div با عرض ثابت و div و یا ul با عرض متغیر به صورت افقی



barnamenevis2016
پنج شنبه 24 اردیبهشت 1394, 01:22 صبح
سلام....
من یک شیطان و یا دیو (div) دارم که سمت راست هست و یک عرض مشخص مثلا heigth = 230px; داره...حالا می خوام که یک div که درونش یک ul یا یک سری منوی افقی هست سمت چپ این شیطان اولی که گفتم قرار بگیره...خوب اینکار با float انجام پذیره...ولی اون شیطانی که سمت چپ قرار می گیره عرضش متناسب محتویاتش کوچیک می شه..من می خوام که این div تمام عرض صفحه رو البته منهای فضایی که div اولی که سمت راست بود گرفته...بگیره...و اگر مثلا پنجره کوچیک بشه...این div عرض کم و زیاد بشه..من هرچه می کنم یا این div به اندازه محتویات جمع می شه و یا باید یک مقدار بدم به این div که اونموقع دیگه سایز این دیو مون متناسب بزرگی پنجره بزرگ نمی شه و عرضش بزرگ نمی شه و به قولی همواره ثابت می مونه؟چه بکنم؟

ASedJavad
پنج شنبه 24 اردیبهشت 1394, 03:08 صبح
سلام
نمیدونم درست متوجه منظورم شدم یانه. منظورت اینجوریه؟

<div style="width:100%;height:500px">
<div style="width:230px;height:500px;float:right;background-color:red"></div>
<div style="width:100%;height:500px;background-color:blue"></div>
</div>

Omid Jackson
پنج شنبه 24 اردیبهشت 1394, 09:07 صبح
سلام....
من یک شیطان و یا دیو (div) دارم که سمت راست هست و یک عرض مشخص مثلا heigth = 230px; داره...حالا می خوام که یک div که درونش یک ul یا یک سری منوی افقی هست سمت چپ این شیطان اولی که گفتم قرار بگیره...خوب اینکار با float انجام پذیره...ولی اون شیطانی که سمت چپ قرار می گیره عرضش متناسب محتویاتش کوچیک می شه..من می خوام که این div تمام عرض صفحه رو البته منهای فضایی که div اولی که سمت راست بود گرفته...بگیره...و اگر مثلا پنجره کوچیک بشه...این div عرض کم و زیاد بشه..من هرچه می کنم یا این div به اندازه محتویات جمع می شه و یا باید یک مقدار بدم به این div که اونموقع دیگه سایز این دیو مون متناسب بزرگی پنجره بزرگ نمی شه و عرضش بزرگ نمی شه و به قولی همواره ثابت می مونه؟چه بکنم؟

عزیز من شیطان چیه؟ دیو (div) مخفف کلمه division (https://translate.google.com/#en/fa/division) هست که معنی بخش یا تقسیم رو میده و برای تقسیم بندی صفحه استفاده میشه
این هم نقل از w3schools

The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS.
راجع به سوالتون هم بگم که خیلی نامفهوم بود و هیچی متوجه نشدم
راجع به کدی هم که دوستمون گذاشتن (تشکر از زحمتشون) بگم که این مدل کد نویسی 100% غلط هستش و اینلاین استایل نوشتن داخل HTML غلط هست

barnamenevis2016
پنج شنبه 24 اردیبهشت 1394, 11:11 صبح
ممنون از پاسخاتون...در مورد اون شیطان بگم...فقط یک شوخی بود..فکر می کنم خیلی بی مزه بود:قهقهه: عذر می خوام
131218
خوب همونطور که در تصویر می بینید..یک div با height ثابت و 200px داریم...و div دوم...در سمت چپه..که عرضش پویاست...و متناسب پنجره کوچیک و بزرگ می شه....
و کدی که دوستمون هم نوشتن...تشکر می کنم ازشون...جواب نداد...کدی که ایشون نوشتن...div دوم تمام صفحه رو می گرفت...حتی div رو div سمت راستی و اولی می افتاد...
.rightDiv:{
float:right;
height:200px
}
.leftDiv{
float:right;
height=500px;
}
مثلا استایل بالا دو تا div رو کنار هم می چینه مشابه تصویر...ولی div دومی و یا سمت چپی هم یک عرض ثابت 500 داره و پویا نیست..من می خوام div سمت چپی بقیه پنجره مرورگر رو پر کنه....:متفکر:آیا شدنیه؟

mohammad425
پنج شنبه 24 اردیبهشت 1394, 11:47 صبح
فکر نکنم اونجوری بشه, باید عرض دوتاشونم تغییر بکنه
به یکیش عرض 80% بدین و به اون یکی 20%
اینجوری:

ASedJavad
پنج شنبه 24 اردیبهشت 1394, 16:04 عصر
ممنون از پاسخاتون...در مورد اون شیطان بگم...فقط یک شوخی بود..فکر می کنم خیلی بی مزه بود:قهقهه: عذر می خوام
همونطور که در تصویر می بینید..یک div با height ثابت و 200px داریم...و div دوم...در سمت چپه..که عرضش پویاست...و متناسب پنجره کوچیک و بزرگ می شه....
و کدی که دوستمون هم نوشتن...تشکر می کنم ازشون...جواب نداد...کدی که ایشون نوشتن...div دوم تمام صفحه رو می گرفت...حتی div رو div سمت راستی و اولی می افتاد...
.rightDiv:{
float:right;
height:200px
}
.leftDiv{
float:right;
height=500px;
}
مثلا استایل بالا دو تا div رو کنار هم می چینه مشابه تصویر...ولی div دومی و یا سمت چپی هم یک عرض ثابت 500 داره و پویا نیست..من می خوام div سمت چپی بقیه پنجره مرورگر رو پر کنه....:متفکر:آیا شدنیه؟

خب شما float شیطان(!) دوم رو حذف کن. البته تو این استایلی که نوشتی، فکر کنم کنظورت از height باید width باشه!

alireza_s_84
پنج شنبه 24 اردیبهشت 1394, 16:54 عصر
ممنون از پاسخاتون...در مورد اون شیطان بگم...فقط یک شوخی بود..فکر می کنم خیلی بی مزه بود:قهقهه: عذر می خوام
131218
خوب همونطور که در تصویر می بینید..یک div با height ثابت و 200px داریم...و div دوم...در سمت چپه..که عرضش پویاست...و متناسب پنجره کوچیک و بزرگ می شه....
و کدی که دوستمون هم نوشتن...تشکر می کنم ازشون...جواب نداد...کدی که ایشون نوشتن...div دوم تمام صفحه رو می گرفت...حتی div رو div سمت راستی و اولی می افتاد...
.rightDiv:{
float:right;
height:200px
}
.leftDiv{
float:right;
height=500px;
}
مثلا استایل بالا دو تا div رو کنار هم می چینه مشابه تصویر...ولی div دومی و یا سمت چپی هم یک عرض ثابت 500 داره و پویا نیست..من می خوام div سمت چپی بقیه پنجره مرورگر رو پر کنه....:متفکر:آیا شدنیه؟
خیلی ساده از کدهای Css اسفاده کنید:

<div style="display: table; width: 100%;">
<div style="display: table-row;">
<div style="display: table-cell; width: 200px;">سمت راست</div>
<div style="display: table-cell;">سمت چپ</div>
</div>
</div>

barnamenevis2016
پنج شنبه 24 اردیبهشت 1394, 17:12 عصر
ASedJavad (http://barnamenevis.org/member.php?60645-ASedJavad)

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

<div style="width:230px;height:500px;float:right;background-color:red"></div>
<div style="width:100%;height:500px;background-color:blue;border:5px solid;"></div>

در واقع در کد اولی شما...چون div سمت راستی می افتاد روی div شمت چپی اینطور به نظر می رسید که کار به سرانجام رسیده در حالی که در واقع اینطور نبود..ممنون ازت(و بله منظورم از height همون width بود)

علیرضا جان..درست شد...دمت گرم