رفتن به مطلب

بهم ریختگی CSS


پست های پیشنهاد شده

سلام
بنده یه کد ساده CSS نوشتم ولی وقتی به عنصر قرمز رنگ خاصیت float:left میدم از main میزنه بیرون و میره پایین
من میخوام عنصر قرمز بیاد کنار عنصر سبز

کد HTML

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>تست</title>
</head>

<body>
  <div class="header"></div>
  <div class="main">
<!-- header Class -->
  <div class="right-box"></div>
  <div class="content"></div>
</div>
</body>

</html>

 

 

کد CSS

body{
  margin: 0;
  padding: 0;
  direction: rtl;
  background-color: #000000;
}
.main{
  background-color: #000000;
  width: 960px;
  height: auto;
  border: 5px solid white;
  margin: 10px auto;


}
.header {
  background-color: #ffffff;
  height: 137px;
  width: 960px;
  margin: auto;
}
.right-box {
  margin: 10px;
  width: 230px;
  height: 900px;
  background-color: #92c586;
}
.content {
  width: 690px;
  height: 900px;
  margin: 10px;
  background-color: red;
}

 

عکس:

 

Untitled-1.jpg

لینک به ارسال

سلام خب کاملا مشخصه باید عرض کادر سبز یا قرمز رو کمتر کنید تا کنار هم قرار بگیره بهتره مقدار عرض رو به صورت درصدی بزارید

ویرایش شده توسط M.Javad
لینک به ارسال
در 31 دقیقه قبل، M.Javad گفته است :

سلام خب کاملا مشخصه باید عرض کادر سبز یا قرمز رو کمتر کنید تا کنار هم قرار بگیره بهتره مقدار عرض رو به صورت درصدی بزارید

نمیشه قبلا تستت کردم

لینک به ارسال

سلام!

الآن عرض content 960 پیکسل هست و main  هم دقیقا همین مقداره پس کلا نباید انتظار داشته باشین چیز دیگه ای توش جا بشه!

اگر هم قبلا تست کردین دلیلش این هست که div های شما margin هم دارن! اون ها رو هم باید حساب کنین 

معمولا در اینجور مواقع نباید به div مادر width ثابت بدین ...

موفق باشین;)

لینک به ارسال
در 9 دقیقه قبل، mashkook گفته است :

سلام!

الآن عرض content 960 پیکسل هست و main  هم دقیقا همین مقداره پس کلا نباید انتظار داشته باشین چیز دیگه ای توش جا بشه!

اگر هم قبلا تست کردین دلیلش این هست که div های شما margin هم دارن! اون ها رو هم باید حساب کنین 

معمولا در اینجور مواقع نباید به div مادر width ثابت بدین ...

موفق باشین;)

عرض content 690 هستش نه 960

جای

<div class="content"></div>

رو با

<div class="right-box"></div>

عوض کردم.

 

 

-----

 

و به عنصر. content مقدار float:left رو اضافه کردم درست شد.

 

شانسی درست شد.

شما میدونید چرا اینجوری درست شد؟

لینک به ارسال

درسته ! اشتباه دیدم :) !

---

برای این کارتون هم :

float:left میگه که عنصر سمت چپ باشه ( از سمت چپ شروع بشه ) 

و خب میبرتش سمت چپ به جای اینکه پشت سر هم نشون بده .

فک میکنم عوض کردن جای این دو تا اهمیتی نداشته باشه و فقط با float درست میشد (الآن هم به اون عنصر دیگه float :right  بدین که مشکل نخورین)

در کل css باید باهاش خیلی ور رفت تا درست نوشتنش دستتون بیاد ، استدلال ها و پیشفرض های خاصی برای خودش داره...:))

لینک به ارسال
در 1 ساعت قبل، mashkook گفته است :

درسته ! اشتباه دیدم :) !

---

برای این کارتون هم :

float:left میگه که عنصر سمت چپ باشه ( از سمت چپ شروع بشه ) 

و خب میبرتش سمت چپ به جای اینکه پشت سر هم نشون بده .

فک میکنم عوض کردن جای این دو تا اهمیتی نداشته باشه و فقط با float درست میشد (الآن هم به اون عنصر دیگه float :right  بدین که مشکل نخورین)

در کل css باید باهاش خیلی ور رفت تا درست نوشتنش دستتون بیاد ، استدلال ها و پیشفرض های خاصی برای خودش داره...:))

جاش که عوض میشه واقعا تاثیر داره
خودتون تست کنید

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...