چطور می توانم دو div را در HTML بصورت افقی در کنار یکدیگر قرار داد؟

Question

بصورت پیش فرض تگ های div در HTML بصورت عمودی (زیر هم) در صفحه قرار می گیرند:

<div class="wrapper">
  <div class="logo">   </div>
  <div class="header">   </div>
</div>

چطور می توانم کاری بکنم که دو تا div داخلی بجای زیر هم قرار گرفتن کنار هم قرار بگیرند؟

Answer 1

لطفا از کد زیر استفاده کنید:

<div style="background-color:red; width: 50%; float: left;" id="d1">div1</div>

<div style="background-color: blue; width: 50%;float: right;" id="d2">div2</div>

Comments

بدون استفاده از width این کار امکان پذیر است؟

---

لطفا از کد زیر استفاده کنید:
<div style="padding: 0px 500px 0px 0px">
    <div id="1" style="background-color: #99FFFF;float: right;">test1</div>
    <div id="2" style="background-color: #c4ffc4;float: right;">test2</div>
</div>

Answer 2

دوست عزیز 1- در صورتی که بخواهی کل پدر را پر کنند و فضای خالی باقی نماند حتما باید از width استفاده کنی چون در غیر این صورت div ها به اندازه محتوای خود خواهند بود و بقیه محتوای پدر به div  دوم  میچسبد !توجه داشته باش در صورتی که div ها دارای padding  هستند بهتر است  از width درصدی استفاده نکنی چراکه هنگام resize کردن page به مشکل بر میخوری . پس در این صورت بهتر هست که از px استفاده کنی...

2 -** نکته مهمی که می تواند بسیار کمک کننده باشد این است  که بعد از این دو تگ div ، در صورتی که بخواهی صفحه را بچینی و یا داخل  پدر این دو div ، تگ های دیگری بذاری باید بلافاصله بعد از div   ها از clearer استفاده نمایی:

در این صورت اگر نخواهی div ها کل محتوای پدر را فراگیرند  نیازی به width نیست و بقیه محتوا به div دوم نمیچسبد .

<div class="wrapper">
  <div class="logo">   </div>
  <div class="header">   </div>

<div class="clearer>"
</div>
</div>
<style>

.clearer{clear:both: line-height:0 ; padding:0 ; margin:0 }   

</style>

 

Answer 3

سلام من تازه تو این سایت عضو شدم

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

 

Comments

جوابتون ناقص تایپ شده. لطفا تکمیلش کنید.