راهنمایی برای موقعیت در css [بایگانی]

jaykob

شنبه 01 بهمن 1390, 09:54 صبح

سلام
من یدونه div دارم که داخل این div سه تا ul هست div من width داره height نه چون می خوام خودش باز شه ( کش بیاره ) و ul هام هم به همینصورت فقط اینک 3 تا کنار هم به صورت افقی چینده بشن داخل همین div م و درصورت اضافه شدن اطلاعات به ul م div م هم باز شه (کش بیاره)

امیدوارم متوجه منضورم شده باشین .
نمونه عکس هم گزاشتم برای درک بهتر.
ممنون .

hamid_shrk

شنبه 01 بهمن 1390, 09:56 صبح

به ul هاتون بدید float:left

jaykob

شنبه 01 بهمن 1390, 10:02 صبح

به ul هاتون بدید float:left

float:left میدم دیگه داخل اون div م قرار نمیگیره یعنی div م جمع میشه

نمونه کد هم اگه خواستید بزارم

ravand

شنبه 01 بهمن 1390, 10:07 صبح

اگه به هم مي چسبه خوب بايد margin-left بدي

jaykob

شنبه 01 بهمن 1390, 10:11 صبح

اگه به هم مي چسبه خوب بايد margin-left بدي
نه دوست عزیز نمی چسبه
نمونه کد گذاشتم .

jaykob

شنبه 01 بهمن 1390, 10:15 صبح

نمونه ضمیمه شد .

به ul مارجین دادم اینجوری شد .

ravand

شنبه 01 بهمن 1390, 10:21 صبح

يعني شما ميخواي كدهات مثل اون عكسي كه دادي بشه ولي نشده؟ درسته؟

jaykob

شنبه 01 بهمن 1390, 10:26 صبح

يعني شما ميخواي كدهات مثل اون عكسي كه دادي بشه ولي نشده؟ درسته؟

بله دقیقا . ولی به div و ul ام نمی خوام height بدم .

ravand

شنبه 01 بهمن 1390, 10:30 صبح

بيا دادا مشكل حل شد:

<!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>xx</title>
<style type="text/css">
.my-div {
width: 700px;
padding: 10px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
display: block;
background-color: #CCC;
}
.my-div ul {
padding: 10px;
width: 200px;
background-color: #999;
margin-right: 10px;
display: block;
float: left;
}
</style>
</head>
<body>
<div class="my-div">
<ul>متن يك</ul>
<ul>متن دو</ul>
<ul>متن سه</ul>
<div style="clear: both;font-size: 2pt"> </div>
</div>
</body>
</html>

شما هميشه قبل از بسته شدن div اصلي كه مقادير ديگه داخلش هست اين كد رو بذار:

<div style="clear: both;font-size: 2pt"> </div>

jaykob

شنبه 01 بهمن 1390, 10:35 صبح

بيا دادا مشكل حل شد:

<!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>xx</title>
<style type="text/css">
.my-div {
width: 700px;
padding: 10px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
display: block;
background-color: #CCC;
}
.my-div ul {
padding: 10px;
width: 200px;
background-color: #999;
margin-right: 10px;
display: block;
float: left;
}
</style>
</head>
<body>
<div class="my-div">
<ul>متن يك</ul>
<ul>متن دو</ul>
<ul>متن سه</ul>
<div style="clear: both;font-size: 2pt"> </div>
</div>
</body>
</html>

شما هميشه قبل از بسته شدن div اصلي كه مقادير ديگه داخلش هست اين كد رو بذار:

<div style="clear: both;font-size: 2pt"> </div>

بله مشکلم حل شد . خیلی ممنون

cyrusthegreat

شنبه 01 بهمن 1390, 20:38 عصر

سلام

دوست عزیز، نگاه کنید، وقتی شما به عناصری داخل یک دایو خاصیت float می دید حال چه به چپ و چه به راست، اون عناصر بدلیل شناور شدنشون، ارتفاعشون روی دایوی که والدشون هست تاثیر نمی زاره و می شه همون مشکلی که شما بهش برخوردین. برای رفع کردن این مشکل، شما می بایست از خاصیت clear استفاده کنید. این خاصیت clear می تونه دارای مقادیر right, left, both, inherit و none باشه. شما وقتی می گی مثلا clear: left دیگه طرف چپ اون المنت عنصری قرار نمی گیره. و برای Right طرف راست و برای both هم دو طرف. یه نکته اینکه Clear: both فقط برای المنت های بالای اون المنت هست و نه پایینی هاش. مقدار inherit هم مقدار Clear عنصر والد رو برای اون انتخاب می کنه.