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

[jafar1374 15]

سلام

چطور می تونم در صفحه اول قالب دیوهارو پشت سر هم بدون اینکه تیبلی ایجاد کنم قرار بدم و داخلش دسته بندی قرار بدم

مثل این عکس :

ممنون

[RedPlus 1585]

سلام من اول كار كه طراحي شرو ع كردم همين مشكل داشتم !‌

با flaot دادن و margin دادن ميشه اين كارو كرد !‌

شما يك كلاس درست كنيد نه چند تا ! و هي همون ديگه كپي و پيست كنيد !‌ واسه نمونه هم اين مينويسم !‌

.class{
flaot:left;
margin-left:10px;
width : ? px;
height: ? px;
border: 2px;
}

اين تعريفش توي css هست فقط كافيه توي html همين كلاس رو 3 بار تكرار كنيد تا 3 تا پشت هم داشته باشين

فقط اندازه هارو طوري تعيين كنيد كه در هر سطر 3 تا جعبه قرار بگيره . و وقتي 4 بار كپي كردي خودش ميره خط پايين !‌

ویرایش شده شهریور 92 توسط RedPlus

[jafar1374 15]

سلام من اول كار كه طراحي شرو ع كردم همين مشكل داشتم !‌

با flaot دادن و margin دادن ميشه اين كارو كرد !‌

شما يك كلاس درست كنيد نه چند تا ! و هي همون ديگه كپي و پيست كنيد !‌ واسه نمونه هم اين مينويسم !‌

.class{
flaot:left;
margin-left:10px;
width : ? px;
height: ? px;
border: 2px;
}

اين تعريفش توي css هست فقط كافيه توي html همين كلاس رو 3 بار تكرار كنيد تا 3 تا پشت هم داشته باشين

فقط اندازه هارو طوري تعيين كنيد كه در هر سطر 3 تا جعبه قرار بگيره . و وقتي 4 بار كپي كردي خودش ميره خط پايين !‌

خیلی جالب بود و ساده - خیلی ممنونم

[jafar1374 15]

یه مشکلی پیش میاد بعد از ایجاد چند تا دیو یکیشون بینشون فاصله می افته

[RedPlus 1585]

كد css & html قرار بده تا مشكلش رو بفهمم از روي عكس نميشه !‌

ویرایش شده شهریور 92 توسط RedPlus

[jafar1374 15]

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

<?php get_header(); ?>
<style type="text/css">
#contencatog {
background: #FFF;
border: solid 1px #999;
float: left;
height: auto;
width: 963px;
margin-bottom: 10px;
}
.allcontent {
float: right;
width: 460px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}
.allcontenttit {
background-color: #FC9;
height: 30px;
width: 460px;
}
.allcontentcon {
width: 460px;
}
</style>
<div id="main">
  <div id="contencatog">

    <div class="allcontent">
    <div class="allcontenttit">
    Content for  class "allcontenttit" Goes Here
    </div>
    <div class="allcontentcon">
    Content for  class "allcontentcon" Goes Here
    </div>
    </div>

	 <div class="allcontent">
    <div class="allcontenttit">
    Content for  class "allcontenttit" Goes Here
    </div>
    <div class="allcontentcon">
    Content for  class "allcontentcon" Goes Here
    </div>
    </div>

	 <div class="allcontent">
    <div class="allcontenttit">
    Content for  class "allcontenttit" Goes Here
    </div>
    <div class="allcontentcon">
    Content for  class "allcontenttit" Goes Here
    </div>
    </div>

	 <div class="allcontent">
    <div class="allcontenttit">
    Content for  class "allcontenttit" Goes Here
    </div>
    <div class="allcontentcon">
   Content for  class "allcontentcon" Goes Here
    Content for  class "allcontentcon" Goes Here
    Content for  class "allcontentcon" Goes Here
    Content for  class "allcontentcon" Goes Here
    Content for  class "allcontentcon" Goes Here
    </div>
    </div>

	 <div class="allcontent">
    <div class="allcontenttit">
    Content for  class "allcontenttit" Goes Here
    </div>
    <div class="allcontentcon">
    Content for  class "allcontentcon" Goes Here
    </div>
    </div>

	 <div class="allcontent">
    <div class="allcontenttit">
    Content for  class "allcontenttit" Goes Here
    </div>
    <div class="allcontentcon">
    Content for  class "allcontentcon" Goes Here
    </div>
    </div>

	 <div class="allcontent">
    <div class="allcontenttit">
    Content for  class "allcontenttit" Goes Here
    </div>
    <div class="allcontentcon">
    Content for  class "allcontentcon" Goes Here
    </div>
    </div>

	 <div class="allcontent">
    <div class="allcontenttit">
    Content for  class "allcontenttit" Goes Here
    </div>
    <div class="allcontentcon">
    Content for  class "allcontentcon" Goes Here
    </div>
    </div>

	 <div class="allcontent">
    <div class="allcontenttit">
    Content for  class "allcontenttit" Goes Here
    </div>
    <div class="allcontentcon">
    Content for  class "allcontentcon" Goes Here
    Content for  class "allcontentcon" Goes Here
    Content for  class "allcontentcon" Goes Here
    Content for  class "allcontentcon" Goes Here
    Content for  class "allcontentcon" Goes Here
    </div>
    </div>

	 <div class="allcontent">
    <div class="allcontenttit">
    Content for  class "allcontenttit" Goes Here
    </div>
    <div class="allcontentcon">
    Content for  class "allcontentcon" Goes Here
    </div>
    </div>

  </div>
</div>
<?php get_footer(); ?>

[RedPlus 1585]

سلام من الان اين گذاشتم كد خودتون هم هست درست نشون ميداد !‌

<style type="text/css">
#contencatog {
background: #FFF;
border: solid 1px #999;
float: left;
height: auto;
width: 963px;
margin-bottom: 10px;
}
.allcontent {
float: right;
width: 460px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}
.allcontenttit {
background-color: #FC9;
height: 30px;
width: 460px;
}
.allcontentcon {
width: 460px;
}
</style>
<div id="main">
<div id="contencatog">

	 <div class="allcontent">
	 <div class="allcontenttit">
	 </div>
	 <div class="allcontentcon">
	 </div>
	 </div>

		 <div class="allcontent">
	 <div class="allcontenttit">
	 </div>
	 <div class="allcontentcon">
	 </div>
	 </div>

		 <div class="allcontent">
	 <div class="allcontenttit">
	 </div>
	 <div class="allcontentcon">
	 </div>
	 </div>

		 <div class="allcontent">
	 <div class="allcontenttit">
	 </div>
	 <div class="allcontentcon">
	 </div>
	 </div>

		 <div class="allcontent">
	 <div class="allcontenttit">
	 </div>
	 <div class="allcontentcon">
	 </div>
	 </div>

		 <div class="allcontent">
	 <div class="allcontenttit">
	 </div>
	 <div class="allcontentcon">
	 </div>
	 </div>

		 <div class="allcontent">
	 <div class="allcontenttit">
	 </div>
	 <div class="allcontentcon">
	 </div>
	 </div>

		 <div class="allcontent">
	 <div class="allcontenttit">
	 </div>
	 <div class="allcontentcon">
	 </div>
	 </div>

		 <div class="allcontent">
	 <div class="allcontenttit">
	 </div>
	 <div class="allcontentcon">
	 </div>
	 </div>

		 <div class="allcontent">
	 <div class="allcontenttit">
	 </div>
	 <div class="allcontentcon">
	 </div>
	 </div>

</div>
</div>

احتمالا كد php باش اين كارو كرده !‌مگر نه از نظر استايل دهي مشكلي نيست !‌

ویرایش شده شهریور 92 توسط RedPlus

[jafar1374 15]

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

مرسی

[اشکان 1989]

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

مرسی

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

[aminvl 99]

در مورد حرف اشکان جان یه نکته رو هم من بگم که به نظرم اگه اتوماتیک نکنه و یه height ثابت بهشون بده دیگه این مشکل پیش نمیاد

[imanfakhar 26231]

http://forum.wp-parsi.com/tutorials/article/332-%D8%B3%D8%A7%D8%AE%D8%AA-%DB%8C%DA%A9-%D8%A2%D8%B1%D8%B4%DB%8C%D9%88-%D8%AA%D9%88%D8%B1%DB%8C-grid/

[RedPlus 1585]

با تشكر از دوستان به خطر پاسخگو بودنشون

اما اگر چپ راست هم كنه بازم همينطور ميشه !‌ اما اون دوست عزيزمون درست گفتن كه ي ارتفاع ثابت بدي بهشون يا اين كه از max-height يا min-height دادن استفاده كني !‌ولي همون ثابت بدي بهتر هست !‌

[jafar1374 15]

ممنون و سپاس از توجه و کمک همه دوستان

خب من نمی خام ارتفاع ثابت باشه چون ممکنه گاهی وقتا پیش بیاد که مجبور بشیم محتوای ی باکس بیشتر یا کنتر باشه و این کارو خراب می کنه

با آرشیو توری هم نشد

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

من چون دو تا ردیف می خاستم دو تا باکس کلی درست کردم و بقیه رو ...

عکس رو ببینید ...

[اشکان 1989]

با تشكر از دوستان به خطر پاسخگو بودنشون

اما اگر چپ راست هم كنه بازم همينطور ميشه !‌ اما اون دوست عزيزمون درست گفتن كه ي ارتفاع ثابت بدي بهشون يا اين كه از max-height يا min-height دادن استفاده كني !‌ولي همون ثابت بدي بهتر هست !‌

آقا RedPlus با تشکر از شما، منظور دو باکس جدا از هم هستش نه اینکه float یا text-align بدیم.

ارتفاع ثابت هم به قول آقا جعفر که گفتن نمیشه استفاده کرد چون محتوا فرق داره همیشه.

ممنون و سپاس از توجه و کمک همه دوستان

خب من نمی خام ارتفاع ثابت باشه چون ممکنه گاهی وقتا پیش بیاد که مجبور بشیم محتوای ی باکس بیشتر یا کنتر باشه و این کارو خراب می کنه

با آرشیو توری هم نشد

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

من چون دو تا ردیف می خاستم دو تا باکس کلی درست کردم و بقیه رو ...

عکس رو ببینید ...

الان دیگه مشکل حل شده و مشکلی نیست.

[jafar1374 15]

آقا RedPlus با تشکر از شما، منظور دو باکس جدا از هم هستش نه اینکه float یا text-align بدیم.

ارتفاع ثابت هم به قول آقا جعفر که گفتن نمیشه استفاده کرد چون محتوا فرق داره همیشه.

الان دیگه مشکل حل شده و مشکلی نیست.

بله - ممنون - فعلا مشکلی نیست در حال طراحی css هستم اگه مشکلی بود مزاحم میشم

[RedPlus 1585]

اهووم پس من اشتباه متوجه شده بودم فك كردم به فرض اگه يك رديف ارتفاع يكي از باكس ها 200 بود اون يكي هم اگه مطلبش كمتره 200 بشه

و همين طور در رديف هاي ديگه !‌اين طور كه الان هست فقط توي ي ستون هستن توي يك رديف قرار نميگيرن !‌ به هر حال مشكل براي دوستمون حل شده !‌