چند روش برای کنار هم قرار دادن [بایگانی]

olampiad

یک شنبه 18 خرداد 1393, 17:23 عصر

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style type="text/css">
#one{
margin:auto;
width:900px;
height:120px;
background:#F36;
}
.tt{
width:100px;
height:100px;
background:#FF0;
margin:10px;
}

</style>

</head>
<body>

<div id="one">

<div class="tt"></div>
<div class="tt"></div>
<div class="tt"></div>
<div class="tt"></div>
<div class="tt"></div>

</div>

</body>
</html>

به این تصویر هم یه نگا بندازید
http://s5.picofile.com/file/8125890476/Capture.png
این تصویر نتایج کدهای بالایی است
چند روش وجود دارد که بلاک های زرد رنگ به جای اینکه کنار هم قرار گیرند
زیر هم قرار گیرند.
بی نهایت ممنون

vimax23

یک شنبه 18 خرداد 1393, 17:47 عصر

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style type="text/css">
#one{
margin:auto;
width:900px;
height:120px;
background:#F36;
}
.tt{
width:100px;
height:100px;
background:#FF0;
margin:10px;
}

</style>

</head>
<body>

<div id="one">

<div class="tt"></div>
<div class="tt"></div>
<div class="tt"></div>
<div class="tt"></div>
<div class="tt"></div>

</div>

</body>
</html>

به این تصویر هم یه نگا بندازید
http://s5.picofile.com/file/8125890476/Capture.png
این تصویر نتایج کدهای بالایی است
چند روش وجود دارد که بلاک های زرد رنگ به جای اینکه کنار هم قرار گیرند
زیر هم قرار گیرند.
بی نهایت ممنون

.tt{
width:100px;
height:100px;
background:#FF0;
margin:10px;
float:right;
}

olampiad

یک شنبه 18 خرداد 1393, 22:08 عصر

ممنون بابت پاسخ
به غیر از float روش دیگری ندارد

rezakho

یک شنبه 18 خرداد 1393, 22:46 عصر

سوالتون رو که جابجا پرسیدید

ولی برای کنارهم قرار دادن المنتهایی که بتونند اندازه هم بگیرند، یکی میشه از float استفاده کرد و دیگری display:inline-block
روش های خوددربیاری! (در این مورد البته) دیگه ای هم وجود داره مثل استفاده از position ها

vimax23

دوشنبه 19 خرداد 1393, 01:33 صبح

ممنون بابت پاسخ
به غیر از float روش دیگری ندارد

یکی دیگشو دوستمون گفته
با جی کوئری هم میشه اما الکی سنگین میشه دیزاین
هدف چی هست بگو کمک بشه کرد