Cara menempatkan div berdampingan

Saya memiliki pembungkus utama div yang diatur lebar 100%. Di dalam itu saya ingin memiliki dua divs, satu yang lebar tetap dan yang lainnya mengisi sisa ruang. Bagaimana cara mengapung div kedua untuk mengisi sisa ruang. Terima kasih atas bantuannya.

Ada banyak cara untuk melakukan apa yang Anda minta:

1. Menggunakan properti CSSfloat :

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

2. Menggunakan properti CSSdisplay - yang dapat digunakan untuk membuat divtindakan seperti 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>
   

Ada lebih banyak metode, tetapi keduanya adalah yang paling populer.

CSS3 memperkenalkan kotak fleksibel (alias. Kotak fleksibel) yang juga dapat mencapai perilaku ini.

Cukup menentukan lebar div pertama, dan kemudian memberikan kedua flex-grownilai 1yang akan memungkinkan untuk mengisi lebar tersisa induk.

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

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

Demo jsFiddle

Perhatikan bahwa kotak fleksibel tidak kompatibel dengan browser lama, tetapi merupakan pilihan bagus untuk menargetkan browser modern (lihat juga Caniuse dan MDN ). Panduan komprehensif yang hebat tentang cara menggunakan kotak fleksibel tersedia di Trik CSS .

Saya tidak tahu banyak tentang strategi desain HTML dan CSS, tetapi jika Anda sedang mencari sesuatu yang sederhana dan yang akan sesuai dengan layar secara otomatis (seperti saya), saya percaya solusi yang paling lurus ke depan adalah membuat divs berperilaku seperti kata-kata dalam sebuah paragraf. Coba sebutkandisplay: inline-block

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

Anda mungkin atau mungkin tidak perlu menentukan lebar DIVs

Anda dapat menggunakan kisi-kisi CSS untuk mencapai hal ini, ini adalah versi jangka panjang untuk tujuan ilustrasi:

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>

Atau metode yang lebih tradisional menggunakan float dan margin.

Saya telah menyertakan warna latar belakang dalam contoh ini untuk membantu menunjukkan di mana segala sesuatunya berada - dan juga apa yang harus dilakukan dengan konten di bawah area mengambang.

Jangan menempatkan gaya Anda sejajar dalam kehidupan nyata, ekstrak ke dalam style sheet.

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>

Berikan div pertama float kiri dan diperbaiki dengan, div kedua 100% lebar float kiri. Itu harus melakukan trik. Jika Anda ingin menempatkan item di bawahnya, Anda perlu jelas: keduanya pada item yang ingin Anda tempatkan di bawah

<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>

Ini akan kompatibel lintas browser. Tanpa margin-kiri Anda akan mengalami masalah dengan konten berjalan jauh ke kiri jika konten Anda lebih panjang dari sidebar Anda.

Jika Anda tidak menandai IE6, maka apung yang kedua <div>dan berikan margin yang sama dengan (atau mungkin sedikit lebih besar dari) <div>lebar tetap pertama .

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;
}

Margin memperhitungkan kemungkinan bahwa 'sisa ruang' <div>mungkin mengandung lebih banyak konten daripada 'lebar tetap' <div>.

Jangan beri latar belakang lebar tetap; jika Anda perlu melihat ini sebagai 'kolom' yang berbeda maka gunakan trik Kolom Faux .