Div yan yana nasıl yerleştirilir

% 100 genişlik ayarlanmış bir ana sarıcı div var. İçinde biri sabit genişlikli diğeri de boşluğu dolduran iki bölüm var. Alanın geri kalanını doldurmak için ikinci div'i nasıl yüzerim. Herhangi bir yardım için teşekkürler.

İstediğinizi yapmanın birçok yolu vardır:

1. CSS floatözelliğini kullanma :

   <div style="width: 100%; overflow: hidden;">
       <div style="width: 600px; float: left;"> Left </div>
       <div style="margin-left: 620px;"> Right </div>
   </div>

2. S'nindisplay aşağıdaki divgibi davranmasını sağlamak için kullanılabilen CSS özelliğini kullanma table:

   <div style="width: 100%; display: table;">
       <div style="display: table-row">
           <div style="width: 600px; display: table-cell;"> Left </div>
           <div style="display: table-cell;"> Right </div>
       </div>
   </div>

Daha fazla yöntem var, ancak bu ikisi en popüler olanları.

CSS3, bu davranışı da başarabilen esnek kutular (esnek kutu) olarak adlandırdı.

Sadece ilk div'in genişliğini tanımlayın ve ikincisine , üst öğenin kalan genişliğini doldurmasına izin verecek bir flex-growdeğer verin 1.

.container{
    display: flex;
}
.fixed{
    width: 200px;
}
.flex-item{
    flex-grow: 1;
}

<div class="container">
  <div class="fixed"></div>
  <div class="flex-item"></div>
</div>

jsFiddle demosu

Esnek kutuların eski tarayıcılarla geriye dönük uyumlu olmadığını, ancak modern tarayıcıları hedeflemek için mükemmel bir seçenek olduğunu unutmayın (ayrıca Caniuse ve MDN'ye bakın ). Esnek kutuların nasıl kullanılacağına dair kapsamlı ve kapsamlı bir kılavuz CSS Tricks'te mevcuttur .

HTML ve CSS tasarım stratejileri hakkında fazla bir şey bilmiyorum, ancak basit bir şey arıyorsanız ve ekrana otomatik olarak sığacaksa (benim gibi) en basit çözümün div'lerin kelimeler gibi davranması olduğuna inanıyorum bir paragraf. Belirtmeyi deneyindisplay: inline-block

<div style="display: inline-block">
   Content in column A
</div>
<div style="display: inline-block">
   Content in column B
</div>

DIV'lerin genişliğini belirtmeniz gerekebilir veya gerekmeyebilir

Bunu elde etmek için CSS ızgarasını kullanabilirsiniz, bu çizim amacıyla uzun el versiyonudur:

div.container {
    display: grid;
    grid-template-columns: 220px 20px auto;
    grid-template-rows: auto;
}

div.left {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: row1-start
    grid-row-end: 3;
    background-color: Aqua;
}

div.right {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end; 1;
    background-color: Silver;
}

div.below {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end; 2;
}

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="below">Below</div>
</div>

Ya da şamandıra ve marj kullanarak daha geleneksel yöntem.

Bu örneğe, şeylerin nerede olduğunu ve yüzen alanın altındaki içerikle ne yapılacağını göstermeye yardımcı olacak bir arka plan rengi ekledim.

Stillerinizi gerçek hayatta satır içine koymayın, bir stil sayfasına çıkarın.

div.left {
    width: 200px;
    float: left;
    background-color: Aqua;
}

div.right {
    margin-left: 220px;
    background-color: Silver;
}

div.clear {
    clear: both;
}

    <div class="left"> Left </div>
    <div class="right"> Right </div>
    <div class="clear">Below</div>

<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>

İlk div'e bir şamandıra sol ve sabit, ikinci div'a% 100 genişlikte bir şamandıra bırakın. Hile yapmalı. Eğer altına öğeleri yerleştirmek istiyorsanız, açık bir şekilde ihtiyacınız var: her ikisi de aşağıya yerleştirmek istediğiniz öğenin üzerine

<div class="container" style="width: 100%;">
    <div class="sidebar" style="width: 200px; float: left;">
        Sidebar
    </div>
    <div class="content" style="margin-left: 202px;">
        content 
    </div>
</div>

Bu çapraz tarayıcı uyumlu olacaktır. Kenar boşluğu bırakmadığınız takdirde, içerik kenar çubuğunuzdan daha uzunsa, içeriğin en sola kadar çalışmasına neden olan sorunlarla karşılaşırsınız.

IE6'yı hedeflemiyorsanız, ikincisini yüzdürün <div>ve ilk <div>sabit genişliğine eşit (veya belki biraz daha büyük) bir kenar boşluğu verin .

HTML:

<div id="main-wrapper">
    <div id="fixed-width"> lorem ipsum </div>
    <div id="rest-of-space"> dolor sit amet </div>
</div>

CSS:

#main-wrapper {
    100%;
    background:red;
}
#fixed-width {
    width:100px;
    float:left
}
#rest-of-space {
    margin-left:101px;
        /* May have to increase depending on borders and margin of the fixd width div*/
    background:blue;
}

Marj, 'alanın geri kalanının' <div>'sabit genişlikten' daha fazla içerik içerme olasılığını açıklar <div>.

Sabit genişliğe arka plan vermeyin; bunları farklı 'sütunlar' olarak görünür bir şekilde görmeniz gerekiyorsa Sahte Sütunlar hilesini kullanın .