نحوه چیدن افقی div

[gitiravan]

با سلام خدمت دوستان
می خواستم بپرسم چرا در پروژه های open source هنگامی که به طراحی div ها نگاه می کنم در صفحه design بصورت عمودی و در زیر هم چیده شده اند اما در هنگام run شدن صفحه بصورت افقی و در کنار هم قرار می گیرند . از کدام یک از کدهای css استفاده می کنند.البته نمی خواهم که از left و right استفاده کنم.

[امید امرایی]

سلام بر شما

این کار رو باید از طریق صفت float انجام بدید
این خصیصه اکثر عناصر html رو به صورت شناور درمیاره.



<div style="float: right;"></div>
<div style="float: left;"></div>

[gitiravan]

خیلی ممنون از جوابی که دادی. اگر که بخواهم دو تا div داشته باشم که هر کدام 50% عرض داشته باشند و در یک ردیف کنار هم باشند دیو دوم به پایین می افتد. اگر یکی را 49% بگیرم در یک ردیف می افتند ولی بینشان یک فاصله خالی می افتد.چه کار کنم که در یک ردیف باشند با 50% عرض هر کدام؟

[xoogle.ir]

margin هر 2 div را ضفر کن احتمالا مشکلت حل میشه اگه نشد padding رو هم صفر کن.

[امید امرایی]

همونطور که دوست عزیز horap30 (http://barnamenevis.org/forum/member.php?u=95573) فرمودن باید حاشیه های بیرونی عنصر رو 0 قرار بدید



<div style="float: right; margin: 0 0 0 0;"></div>

[mrbm_2007]

فکر کنم بهتر با شه از راه اصولیش یعنی display: inline-block استفاده کنی

<div style="display: inline-block; height: 500px;width: 100px;border:solid 1px red">
div1</div>
<div style="display: inline-block; height: 500px;width: 100px;border:solid 1px blue">
div2</div>
<div style="display: inline-block; height: 500px;width: 100px;border:solid 1px green">
div3</div>

[امید امرایی]

روش شما هم درسته mrbm_2007 (http://barnamenevis.org/forum/member.php?u=86618) عزیز
اما قابلیت حمل کمتری داره یا در اصطلاح cross-browser نیست
به همین دلیل در این مواقع روش اصولی تر رو شرایط کنونی اجرا تعیین میکنه
اما اگر روزی تمامی مرورگر ها به یک استاندارد واحد برسن اون موقع گفته شما کاملا صحیحه