Div'i CSS Kullanarak 2 Sütuna Böl

CSS kullanarak bir div'i iki sütuna ayırmaya çalışıyordum, ancak henüz onu çalıştırmayı başaramadım. Temel yapım şu şekildedir:

<div id="content">
  <div id="left">
     <div id="object1"></div>
     <div id="object2"></div>
  </div>

  <div id="right">
     <div id="object3"></div>
     <div id="object4"></div>
  </div>
</div>

Sağ ve sol div'leri ilgili konumlarına (sağ ve sol) kaydırmaya çalışırsam, içerik div'in arka plan rengini görmezden geliyor gibi görünüyor. Ve çeşitli web sitelerinden denediğim diğer kodlar benim yapıma tercüme edemiyor gibi görünüyor.

Herhangi bir yardım için teşekkürler!

Bu iki div'i yüzdürdüğünüzde, div içeriği sıfır yüksekliğe daralır. Sadece ekle

<br style="clear:both;"/>

#right div'den sonra ancak içerik div'in içinde. Bu, content div'i iki dahili, kayan div'i çevrelemeye zorlar.

Bu benim için iyi çalışıyor. Ekranı ikiye böldüm:% 20 ve% 80:

<div style="width: 20%; float:left">
   #left content in here
</div>

<div style="width: 80%; float:right">
   #right content in there
</div>

Bunu yapmanın başka bir yolu overflow:hidden;, kayan öğelerin ana öğesine eklemektir .

overflow: hidden, öğenin yüzen öğelere sığacak şekilde büyümesini sağlar.

Bu şekilde, başka bir html öğesi eklemek yerine hepsi css'de yapılabilir.

Bunu yapmanın en esnek yolu:

#content::after {
  display:block;
  content:"";
  clear:both;
}

Bu, öğeyi #content'e eklemekle tam olarak aynı işlevi görür:

<br style="clear:both;"/>

ama aslında bir öğe eklemeden. :: after sözde öğe olarak adlandırılır. Bunun # overflow:hidden;content'e eklemekten daha iyi olmasının tek nedeni , mutlak konumlandırılmış alt öğelere sahip olabilmeniz ve yine de görünür olabilmenizdir. Ayrıca kutu gölgelerinin hala görünür olmasına izin verecektir.

Verilen cevapların hiçbiri orijinal soruyu cevaplamadı.

Soru, css kullanarak bir div'i 2 sütuna nasıl ayıracağınızdır.

Yukarıdaki yanıtların tümü, 2 sütunu simüle etmek için aslında 2 div'i tek bir div'e yerleştirir. Bu kötü bir fikir çünkü içeriği dinamik bir şekilde 2 sütuna aktaramayacaksınız.

Bu nedenle, yukarıdakinin yerine, aşağıdaki gibi CSS kullanılarak 2 sütun içerecek şekilde tanımlanan tek bir div kullanın ...

.two-column-div {
 column-count: 2;
}

yukarıdakileri bir div'e sınıf olarak atayın ve aslında içeriğini 2 sütuna akıtacaktır. Daha ileri gidebilir ve kenar boşlukları arasındaki boşlukları da tanımlayabilirsiniz. Div içeriğine bağlı olarak, içeriğinizin sütunlar arasında kesilmemesi için kelime sonu değerleriyle uğraşmanız gerekebilir.

Her ne sebeple olursa olsun temizleme yaklaşımlarını hiç sevmedim, bunun gibi şeyler için yüzer sayılara ve yüzde genişliklerine güveniyorum.

İşte basit durumlarda işe yarayan bir şey:

#content { 
  overflow:auto; 
  width: 600px; 
  background: gray; 
} 

#left, #right { 
  width: 40%; 
  margin:5px; 
  padding: 1em; 
  background: white; 
} 

#left  { float:left;  }
#right { float:right; } 

İçine biraz içerik koyarsanız, işe yaradığını göreceksiniz:

<div id="content">
  <div id="left">
     <div id="object1">some stuff</div>
     <div id="object2">some more stuff</div>
  </div>

  <div id="right">
     <div id="object3">unas cosas</div>
     <div id="object4">mas cosas para ti</div>
  </div>
</div>

Burada görebilirsiniz: http://cssdesk.com/d64uy

Çocuk bölmeleri yapın inline-blockve yan yana konumlansınlar:

#content {
   width: 500px;
   height: 500px;
}

#left, #right {
    display: inline-block;
    width: 45%;
    height: 100%;
}

Demoyu Gör

Bu yazının eski olduğunu biliyorum, ancak yine de daha basit bir çözüm arıyorsanız.

#container .left,
#container .right {
    display: inline-block;
}

#container .left {
    width: 20%;
    float: left;
}
#container .right {
    width: 80%;
    float: right;
}

Bir bölmeyi dikey olarak bölmenin en iyi yolu -

#parent {
    margin: 0;
    width: 100%;
}
.left {
    float: left;
    width: 60%;
}
.right {
    overflow: hidden;
    width: 40%;
}

Div öğenizin düzenini kontrol etmek için flexbox'ı kullanabilirsiniz :

* { box-sizing: border-box; }

#content {
  background-color: rgba(210, 210, 210, 0.5);
  border: 1px solid #000;
  padding: 0.5rem;
  display: flex;
}

#left,
#right {
  background-color: rgba(10, 10, 10, 0.5);
  border: 1px solid #fff;
  padding: 0.5rem;
  flex-grow: 1;
  color: #fff;
}

<div id="content">
  <div id="left">
     <div id="object1">lorem ipsum</div>
     <div id="object2">dolor site amet</div>
  </div>

  <div id="right">
     <div id="object3">lorem ipsum</div>
     <div id="object4">dolor site amet</div>
  </div>
</div>

Şamandıralar akışı etkilemez. Yapmaya meyilli olduğum şey bir eklemek

<p class="extro" style="clear: both">possibly some content</p>

"wrapping div" nin sonunda (bu durumda içerik). Bunu anlamsal olarak, böyle bir paragrafa ihtiyaç olabileceğini söyleyerek gerekçelendirebilirim. Diğer bir yaklaşım da bir clearfix CSS kullanmaktır:

#content:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#content {
  display: inline-block;
}
/*  \*/
* html #content {
  height: 1%;
}

#content {
  display: block;
}
/*  */

Yorumlarla ilgili hile, tarayıcılar arası uyumluluk içindir.

En iyi cevap burada Soru 211383

Bu günlerde, kendine saygı duyan herhangi bir kişi, takas şamandıraları için belirtilen "mikro netleştirme" yaklaşımını kullanmalıdır.

1. Üst DIV'de yazı tipi boyutunu sıfıra eşit yapın.

2. Alt DIV'lerin her biri için genişlik yüzdesini ayarlayın.

   #content {
       font-size: 0;
   }
   
   #content > div {
       font-size: 16px;
       width: 50%;
   }
   

* Safari'de çalışması için% 49'u ayarlamanız gerekebilir.

Bir bölmeyi iki sütuna bölmek çok kolaydır, bunu koyarsanız (genişlik:% 50 gibi) sütununuzun genişliğini daha iyi belirtin ve float: sol sütun için sol ve sağ sütun için float: sağ olarak ayarlayın.