قرار گرفتن چند div در کنار یکدیگر

من میخواهم که چند div را در داخل یک table قرار دهم. با توجه به اینکه width هر یکی از div ها بر اساس درصدی از پهنای table باشد.
مثال:یک جدول که پهنای آن با درصد تعیین شده است (100%)
در داخل این جدول 3 تا div قرار بگیرد که پهنای هر یک برابر با 30% از پهنای جدول اصلی باشد و در کنار یکدیگر قرار گرفته باشند.
در واقع شکل ظاهری این مثال مانند یک جدول با یک ردیف و سه ستون است که پهنای هر یکی از سلولهای جدول برابر است با 30 درصد از پهنای کل جدول.
 

reza699

Active Member
خوب شما توجه داشته باش که دایو ها رو که بهشون width میدی . بهشون float هم بده تا کنار هم قرار بگیرن وگرنه زیر هم دیگه قرار میگیرن . مثلا همشونو float :left بده تا کنار هم قرار بگیرن
 

nasser_ray

Member
فکر می کنم با استفاده از align و استفاده از clear:none مشگل شما کاملاً حل بشه
 
تصویر زیر را ببینید. اون چیزی نیست که مورد نظر من است.

250unpw.gif


کد مربوط به تصویر بالا:
کد:
<!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 type="text/css">
<!--
.thumbnail {
	float: left;
	width: auto;
	border: 1px solid #999;
	margin: 15px;
	padding: 5px;
}
.clearboth {
	clear: both;
}
-->
</style>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" style="background-color:#CCCCCC">
  <tr>
    <td>
      <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br>

        Caption </div>
      <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br>
        Caption </div>
      <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br>
        Caption </div>
      <br class="clearboth">

      <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br>
        Caption </div>
      <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br>
        Caption </div>
      <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br>
        Caption </div>

    </td>
  </tr>
</table>
</body>
</html>
 

Mahdi_20

Member
خب مگه شما نمي خواي width =30% باشه پس چرا گذاشتي auto ؟
width رو برابر 30% بزار البته اين كار به خاطر padding و margin يه مشكلاتي داره
من اين رو امتحان كردم %25 قرار دادم تقريبا درست ميشه..
ولي وقت نكردم تستش كنم..اين padding و margin رو كم و زياد كن
درست ميشه..
 
مشکل من همین padding و margin هست.
به این دلیل که این صفحه بصورت داینامیک ایجاد میشه و ممکن است بر اساس تنظیمات کاربر در هر ردیف 3 یا چند div وجود داشته باشد نتیجتا باید کاری کنم که نیاز به تنظیم و مقدار دهی دستی نباشد و فقط مقدار padding و margin را در فایل css تعیین کنم و مقدار width هر یکی از div ها درصدی از پهنای جدول اصلی باشد ( 100% تقسیم بر تعداد div ها )
 

Mahdi_20

Member
شما تو کد خودتون از Width:auto استفاده کردین.
خب اگه میخوایین 30% باشه اون رو به این شکل تغییر دهید : Width:30%

شاید هم میخوائین padding و margin متغییر باشند؟ کدومش؟
میخوایین اندازه Div متغییر باشه
میخوایین padding و margin متغییر باشند
یا انکه هردو؟
 
آخرین ویرایش:
شما تو کد خودتون از Width:auto استفاده کردین.
خب اگه میخوایین 30% باشه اون رو به این شکل تغییر دهید : Width:30%
شاید هم میخوائین padding و margin متغییر باشند؟ کدومش؟
میخوایین اندازه Div متغییر باشه
میخوایین padding و margin متغییر باشند
یا انکه هردو؟

میخواهم اندازه Div متغیر باشه و مقدار paddign و margin ثابت.
 

echessdesign

مدیر انجمن طراحی وب
درود بر شما
اگر منظور شما را درست متوجه شده باشم، شما بدون دادن مقدار به خصیصه width نمی توانید 3 Block Level را در کنار هم در یک جدول نگه دارید...
 

echessdesign

مدیر انجمن طراحی وب
درود بر شما
در صورتی که مقدار DIV اول، از مقدار جدول بیشتر باشد، دو DIV دیگر را به زیر می کشد، شما می توانید از max-height استفاده نمایید.
در این رابطه در انجمن مفصل بحث شده است، جستجو فرمایید.
پاینده باشید.
 
شما متوجه منظور من نشدید ( البته اینطور فکر میکنم )

کد زیر را لطفا ببینید. (تصویر زیر خروجی همین کد است)

2ymuio2.jpg


کد:
<!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 type="text/css">
<!--
.thumbnail {
	float: left;
	width: 25%;
	border: 1px solid #999;
	margin: auto;
	padding: 0;
}
.clearboth {
	clear: both;
}
-->
</style>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" style="background-color:#CCCCCC">
  <tr>
    <td>
      <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br>
        Caption </div>
      <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br>
        Caption </div>
      <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br>
        Caption </div>
      <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br>
        Caption </div>
        
      <br class="clearboth">
      
      <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br>
        Caption </div>
      <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br>
        Caption </div>
      <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br>
        Caption </div>
      <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br>
        Caption </div>
    </td>
  </tr>
</table>
</body>
</html>

با اینکه پهنای هر یکی از div ها را 25% قرار داده ام، باز هم یکی از آنها به زیر 3 تای بالایی میرود در حالی که منطقا باید هر چهار div در یک سطر قرار بگیرد.
این مشکل با تغییر مقدار 25% درصد به مقادیر کمتر (مثلا 24%) حل میشود. اما مشکل این است که من میخواهم به یک رابطه منطقی برسم که بتوانم همچین ساختاری را بصورت داینامیک ایجاد کنم ( مثلا وقتی پنج div دارم پهنای هر یک 20% باشد و اگر اگر n تا div باشد مقدار پهنای هر یکی از تقسیم 100 درصد بر تعداد div ها بدست بیاید.)
مثلا
 

echessdesign

مدیر انجمن طراحی وب
درود بر شما
تازه متوجه منظور شما شدم، شما همیشه باید یک در صد کمتر از مجموع کل مقدار دهی کنید = %90
کافیست که به یکی از Div خود، یک درصد کمتر از بقیه دهید:
HTML:
<div class="thumbnail" style="width:24%;">
 

maxpelank

Active Member
با سلام
اگر منظورتون رو درست متوجه شده باشم شما 3 تا ستون می خوای که بر اساس داده های درون اون ها اندازه اون ها متغیر باشه .
برای این کار شمامیتونی به صورت زیر عمل کنی یعنی فقط مقدار[FONT=courier new, courier, mono]padding و[/FONT][FONT=courier new, courier, mono]margin رو مشخص کنی برای هر ستون بعد به هر کدوم [/FONT][FONT=courier new, courier, mono]float: left; بدی بعدش هم در اخر یک کد[/FONT][FONT=courier new, courier, mono]div با [/FONT][FONT=courier new, courier, mono]#footer {
background: #0f0;
clear: both;
width: 100%;
}
بدی[/FONT][FONT=courier new, courier, mono] : اینجوری بزاری :

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


[/FONT][FONT=courier new, courier, mono]<html>
<head>
<title>THREE-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 100%;
}
#leftcol {
background: #f00;
float: left;
width: 20%;
height: 500px;
}
#rightcol {
background: #f00;
float: right;
width: 20%;
height: 500px;
}
#content {
background: #fff;
float: left;
width: 59%;
height: 500px;
}
#footer {
background: #0f0;
clear: both;
width: 100%;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="rightcol">Right Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>[/FONT]

این هم عکس نمایش داده شده این کد بالا
6.jpg


این هم لینک سایتی که من خودم از اون خیلی بهره بردم امید وارم به دردتون بخوره واسه ی من خیلی مفید بود.
http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/8/
[FONT=courier new, courier, mono]
[/FONT]
 

جدیدترین ارسال ها

بالا