+3 امتیاز
قبل در برنامه نویسی توسط (922 امتیاز)

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

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

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

3 پاسخ

+3 امتیاز
قبل توسط (193 امتیاز)
ویرایش شده قبل توسط

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

<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>
قبل توسط (922 امتیاز)
بدون استفاده از width این کار امکان پذیر است؟
قبل توسط (193 امتیاز)
ویرایش شده قبل توسط
لطفا از کد زیر استفاده کنید:
<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>
+3 امتیاز
قبل توسط (170 امتیاز)
ویرایش شده قبل توسط

دوست عزیز 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>

 

0 امتیاز
قبل توسط (0 امتیاز)

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

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

 




قبل توسط (1.1هزار امتیاز)
+1
جوابتون ناقص تایپ شده. لطفا تکمیلش کنید.

سوالات مشابه

+1 امتیاز
1 پاسخ 1.4هزار بازدید
+1 امتیاز
1 پاسخ 1.9هزار بازدید
سوال شده 10 سال قبل در برنامه نویسی توسط IMANAZADI (72 امتیاز)
+1 امتیاز
1 پاسخ 5.4هزار بازدید
0 امتیاز
1 پاسخ 390 بازدید
سوال شده 10 سال قبل در برنامه نویسی توسط Saeed Zarinfam (1.1هزار امتیاز)
0 امتیاز
1 پاسخ 711 بازدید
+1 امتیاز
1 پاسخ 1.5هزار بازدید
سوال شده 9 سال قبل در برنامه نویسی توسط IMANAZADI (72 امتیاز)
0 امتیاز
2 پاسخ 1.3هزار بازدید
+1 امتیاز
0 پاسخ 516 بازدید
0 امتیاز
1 پاسخ 669 بازدید
سوال شده 10 سال قبل در برنامه نویسی توسط Saeed Zarinfam (1.1هزار امتیاز)
+1 امتیاز
1 پاسخ 1.2هزار بازدید
...