CSS yan yana iki div

İki <div>s'yi yan yana koymak istiyorum . Sağ <div>yaklaşık 200 piksel; ve sol <div>ekran genişliğinin geri kalanını doldurmalı? Bunu nasıl yapabilirim?

Öğelerinizi düzenlemek için flexbox'ı kullanabilirsiniz :

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Bu temelde sadece flexbox yüzeyini kazımaktır. Flexbox oldukça şaşırtıcı şeyler yapabilir.

Daha eski tarayıcı desteği için, çözmek için CSS float ve genişlik özelliklerini kullanabilirsiniz.

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Bu hala geçerli bir sorun olup olmadığını bilmiyorum ama ben sadece aynı sorunla karşılaştım ve CSS display: inline-block;etiketi kullanılır . Bunları bir div içinde uygun şekilde konumlandırılabilecek şekilde sarmak.

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

Satır içi stil özniteliğinin kullanımının yalnızca bu örneğin kısa özünde kullanılması için kullanıldığına dikkat edin.

Ne yazık ki, bu genel durum için çözülmesi önemsiz bir şey değildir. En kolay şey bir css tarzı özellik "float: right;" bununla birlikte, bu, "ana" dilinizin gerçekte tam genişliğe sahip olmasına neden olur ve buradaki herhangi bir metin, içeriğe bağlı olarak genellikle garip görünen 200 piksellik div'in kenarında kayar. kayan bir görüntü hariç her durumda).

EDIT: Dom'un önerdiği gibi, sarma problemi elbette bir farkla çözülebilir. Aptal bana.

@Roe ve @MohitNanda tarafından önerilen yöntem çalışır, ancak doğru div olarak ayarlanmışsa float:right;, HTML kaynağında önce gelmesi gerekir. Bu, soldan sağa okuma sırasını kırar ve sayfa stiller kapalı olarak görüntülenirse kafa karıştırıcı olabilir. Bu durumda, bir sarıcı div ve mutlak konumlandırma kullanmak daha iyi olabilir:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

kanıtlanmış:

Düzenleme: Hmm, ilginç. Önizleme penceresi doğru biçimlendirilmiş div'leri gösterir, ancak oluşturulan yayın öğesi gösterilmez. Üzgünüm, kendiniz denemek zorundasınız.

Bugün bu problemle karşılaştım. Yukarıdaki çözümlere dayanarak, bu benim için çalıştı:

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

Üst div öğesini tam genişliğe yayın ve içerdiği div'leri kaydırın.

GÜNCELLEME

Öğeleri arka arkaya yerleştirmeniz gerekiyorsa, Flex Layout'u kullanabilirsiniz . Burada başka bir Flex eğitiminiz var . Harika bir CSS aracıdır ve% 100 uyumlu olmasa da, desteği her geçen gün daha da iyileşmektedir. Bu kadar basit çalışır:

HTML

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

CSS

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

Ve burada elde ettiğiniz, toplam alanı 4 birim olan, alanı çocuklarıyla 1/4 ve 3/4 arasında paylaşan bir konteynerdir.

CodePen'de sorununuzu çözen bir örnek yaptım. Umut ediyorum bu yardım eder.

http://codepen.io/timbergus/pen/aOoQLR?editors=110

ÇOK YAŞLI

Belki bu sadece saçmalık, ama bir masa ile denedin mi? Div'leri konumlandırmak için doğrudan CSS kullanmaz, ancak iyi çalışır.

Bir 1x2 tablo oluşturabilir ve içinizi koyabilir divsve ardından tabloyu istediğiniz gibi koymak için CSS ile biçimlendirebilirsiniz:

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

Not

Tabloyu kullanmaktan kaçınmak istiyorsanız, daha önce olduğu gibi, kullanmak söyledi float: left;ve float: right;aşağıdaki elemanda, bir eklemeyi unutmayın clear: left;, clear: right;ya clear: both;temizlenmeli pozisyonunu sahip olmak için.

div1 {
    float: right;
} 
div2 {
    float: left;
}

Bu, clear: bothbu iki sütun bloğunu ayıran öğe için ayarladığınız sürece Tamam olarak çalışır .

Aynı problemle karşılaştım ve Mohits versiyonu çalışıyor. Sol-sağ siparişinizi html'de tutmak istiyorsanız, bunu deneyin. Benim durumumda, sol div boyutu ayarlıyor, sağ div 260px genişliğinde kalıyor.

HTML

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

CSS

.box {
    height: 200px;
    padding-right: 260px;
}    

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

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

İşin püf noktası, ana kutuda doğru bir dolgu kullanmaktır, ancak sağdaki kutuyu kenar boşluğu ile tekrar yerleştirerek bu alanı tekrar kullanmaktır.

Gizli bir float ve overflow-x karışımı kullanıyorum. Minimum kod, her zaman çalışır.

https://jsfiddle.net/9934sc4d/4/ - PLUS şamandıranızı temizlemenize gerek yok!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

Herkesin işaret ettiği gibi, bunu float:right;RHS içeriğine a ve LHS'ye negatif bir marj koyarak yapabilirsiniz .

Bununla birlikte float: left;, LHS'de (Mohit'in yaptığı gibi) bir kullanmazsanız , bir adım efekti elde edersiniz çünkü LHS div hala yerleşimdeki kenar boşluğunu tüketecektir.

Bununla birlikte, LHS şamandıra içeriği küçültür, bu nedenle kabul edilebilir değilse, tanımlanmış genişlikli bir alt düğüm eklemeniz gerekir; bu noktada ebeveyn üzerindeki genişliği de tanımlamış olabilirsiniz.

Ancak .. David'in işaret ettiği gibi, LHS şamandıra gereksinimini önlemek için işaretlemenin okuma sırasını değiştirebilirsiniz, ancak bu okunabilirlik ve erişilebilirlik sorunları olabilir.

Ancak, bu sorun bazı ek işaretleme verildiğinde şamandıralarla çözülebilir

(uyarı: Bu örnekte .clearing div değerini onaylamıyorum, ayrıntılar için buraya bakın)

Her şey düşünüldüğünde, çoğumuzun açgözlü olmayan bir genişlik olmasını diliyoruz: CSS3'te kalmak ...

IE7'de desteklenmediği için bu herkesin cevabı olmayacak, ancak bunu kullanabilir ve IE7- için alternatif bir cevap kullanabilirsiniz. Ekran: tablo, ekran: tablo satırı ve ekran: tablo hücresi. Bunun düzen için tablolar kullanmadığını, ancak div öğelerini şekillendirdiğini unutmayın, böylece işler yukarıdan tüm zorluklarla güzel bir şekilde hizalanır. Mine bir html5 uygulaması, bu yüzden harika çalışıyor.

Bu makalede bir örnek gösterilmektedir: http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/

Stil sayfanız aşağıdaki gibi görünecektir:

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }

Benzer bir şey yapan web sitelerimden birini yorumlamak için:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

sadece bir Z-endeksi kullanın ve her şey güzel oturacak. sabit veya mutlak olarak işaretlenmiş konumlara sahip olduğunuzdan emin olun. hiçbir şey bir kayan nokta etiketinde olduğu gibi hareket etmez.