Bu iki div'i yan yana nasıl alabilirim?

110

İç içe olmayan iki div'im var, biri diğerinin altında. Her ikisi de bir ebeveyn div içindedir ve bu ebeveyn div kendisini tekrar eder. Yani esasen:

<div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

Her birinden çiftini almak istiyorum child_div_1ve child_div_2yanyana. Bunu nasıl yapabilirim?

css layout html

— Justin Meltzer
kaynak

82

#parent_div_1, #parent_div_2, #parent_div_3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.child_div_1 {
  float: left;
  margin-right: 5px;
}

Http://jsfiddle.net/c6242/1/ adresindeki çalışma örneğini kontrol edin

— Hüseyin
kaynak

1

Çocukların ebeveynlerin değil, yan

— yana dizilmesini

4

Hala display: table-cellonun kastettiği şeye daha yakın sonuçlar alacağını düşünüyorum (o zamandan beri aynı yüksekliğe sahip olacaklar vs.) ama bu yol kesinlikle işe yarayacak.

— ehdv

@ehdv display: table-cell, IE6 IE7'de desteklenmez. yüzer: left; bunu yapmanın doğru yolu.

— Hüseyin

Aslında bunu IE6,7'de yapmanın en uygun yolu şudur <tr><td>, çünkü kullanıcı pencereyi yeniden boyutlandırdığında başka herhangi bir seçenek bozulacaktır. Modern tarayıcılarda display: inline-blockgenellikle en iyi seçenektir.

— John Henckel

126

Div'ler varsayılan olarak blocköğeler olduğundan, yani tam kullanılabilir genişlikte olacaklar, kullanmayı deneyin -

display:inline-block;

div satır içi hale getirilmiştir, yani öğelerin akışını bozmaz, ancak yine de bir blok öğesi olarak ele alınacaktır.

Bu tekniği güreşmekten daha kolay buluyorum float s .

Daha fazlası için bu eğiticiye bakın - http://learnlayout.com/inline-block.html . Hatta buna yol açan önceki makaleleri bile tavsiye ederim. (Hayır, yazmadım)

— Robin Maben
kaynak

Bu çözümü gerçekten beğendim. Bununla ilgili tek sorunum, her iki div'in üstünü hizalamak yerine altını hizalaması. Bunun için de hızlı bir ayar var mı?

— Chris

divEşit yüksekliğe sahip 2 sarmalayıcı kullanmanızı öneririm, böylece içlerindeki içerik üste hizalanmış gibi görünür.

— Robin Maben

2

Katılıyorum. Bu, float:lefttüm düzeninizi yeniden tanımlamadan size çok daha fazla seçenek sunduğu için çok daha iyidir . İşler bu şekilde "sadece çalışır". Buradan bir göz atın: jsfiddle.net/SrAQd/4

— Jerry

12

Dikey hizalama elde etmek için "vertical-align: top;"

— cdiggins

@Chris: Evet, cdiggins'e katılıyorum. Bu sana yardımcı olmalı.

— Robin Maben

44

Aşağıdaki kodu çok yararlı buldum, burada aramaya gelen herkese yardımcı olabilir

<html>
<body>
    <div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
    <div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
    <div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>

Snippet'i genişlet

— axs
kaynak

11

Flexbox'ı kullanmak çok basit!

#parent_div_1, #parent_div_2, #parent_div_3 {
    display: flex;
}

Keman örneği

— Sol
kaynak

6

Stili kullanmak

.child_div_1 {
    float:left
}

— amit_g
kaynak

5

Benim için en iyi çalışan:

 .left{
   width:140px;
   float:left;
   height:100%;
 }

 .right{
   margin-left:140px;
 }

http://jsfiddle.net/jiantongc/7uVNN/

— jiantongc
kaynak

2

float:leftAlt div sınıfındaki kullanıcı özelliği

div yapısını ayrıntılı olarak kontrol edin: http://www.dzone.com/links/r/div_table.html

— Pranay Rana
kaynak

2

Flexbox kullanma

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }

— dasfdsa
kaynak