ورود

View Full Version : سوال: div ها در کنار هم


pazis.x
جمعه 19 شهریور 1389, 00:43 صبح
سلام. من می خوام یه چیزی شبیه شکل زیر درست کنم. (البته قالب وبلاگ نیست!!)


http://irfreeup.com/images/btgf6xhj342lsfj05d3a.jpg


مشکل من اینه که نمی دونم چطوری دو تا div کنار هم درست کنم. وقتی:


<div> something </div> <div> something else </div>

رو می نویسم ، div ها زیر هم قرار می گیرند. چطور کنار هم می شود باشند؟

حدس خودم یه چیزایی مثل Z-index یا padding یا margin یا... هست. ولی نمی دونم دقیقاً چطوری این کار رو بکنم.

لطفاً راهنمایی کنید.
hamiii
جمعه 19 شهریور 1389, 10:11 صبح
سلام. کدای زیر و نیگا کنید. فکر کنم دقیقا چیزی باشه که مد نظرتونه.(با ارتفاع متغیر)


<!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>Untitled Document</title>
<style>
*{ padding:0; margin:0}
.container{
width:800px;
margin:30px 0 0 0;
}
.header{
width:800px;
height:50px;
border:1px solid black;
float:right;
margin-bottom:10px
}
.side{
width:196px;
height:auto;
min-height:300px;
overflow:hidden;
float:right;
border:1px solid black;
}
.main{
width:590px;
height:auto;
min-height:300px;
float:right;
overflow:hidden;
border:1px solid black;
margin-right:10px;
}
</style>
</head>

<body>
<center>
<div class="container">
<div class="header"></div>
<div class="side"></div>
<div class="main"></div>
</div>
</body>
</html>


موفق باشی
xoogle.ir
جمعه 19 شهریور 1389, 14:54 عصر
div در حالت عادی block level هست یعنی تمام فضایی که بهش میدی رو اشغال میکنه به همین خاطر هست که نمیذاره div دیگه ای در کنارش قرار بگیره.
برای اینکه بتونی اونا رو کنار هم بذاری بهترین راه همینی هست که دوستمون گفته یعنی از float استفاده کنی.
البته این روش فکر میکنم توی ie6 باگ داره و ممکنه درست نمایش داده نشه باید تستش کنی.
hamiii
جمعه 19 شهریور 1389, 18:43 عصر
فکر میکنم توی ie6 باگ داره

سلام.
این روش توی همه ی مرورگرها نمایش یکسانی داره.
موفق باشید.
binyaft
جمعه 19 شهریور 1389, 19:17 عصر
فکر کنم اینجا در مورد باگ ie نوشته
http://www.positioniseverything.net/explorer/floatIndent.html
hamiii
جمعه 19 شهریور 1389, 22:14 عصر
http://www.positioniseverything.net/...oatIndent.html (http://www.positioniseverything.net/explorer/floatIndent.html)

مطلب مفیدی بود.یه مقداریشو خوندم.در مورد مقادیر پیش فرض متفاوت در نظر گرفته شده برای ie6 نسبت به دیگر مرورگرها و نحوه ی برطرف کردن این اشکاله.
ممنون
pazis.x
شنبه 20 شهریور 1389, 01:41 صبح
سلام. دست همگی درد نکنه. دقیقاً همون چیزی بود که می خواستم. فقط این

overflow : hidden

چه فایده ای داره !؟
hamiii
شنبه 20 شهریور 1389, 08:03 صبح
overflow : hidden

چه فایده ای داره !؟
درود بر شما.
این ویژگی باعث میشه هرچیزی که قراره از چاچوب باکس بزنه بیرون غیر قابل روئیت بشه.
البته در اینجا ترکیب height:auto با overflow:hidden باعث میشه که ارتفاع باکس قابل تغییر باشه و اسکرول نخوره. اگر hidden رو برداریم در بعضی از مرورگرهای قدیمی اسکرول خواهیم داشت.
موفق باشی