Buat div mengisi lebar yang tersisa

87

Bagaimana saya bisa membuat div mengisi lebar yang tersisa?

<div id="Main" style="width: 500px;">
    <div id="div1" style="width: 100px;"></div>
    <div id="div2"></div>
    <div id="div3" style="width: 100px; float: right;"></div>
</div>

Bagaimana saya bisa div2mengisi sisanya?

html css raklos
sumber
Untuk jawaban tepat terkini, harap ubah jawaban terbaik yang dipilih untuk jawaban Adrien Be.
edwardtyl
Saya membutuhkan sebaliknya, div pusat lebar tetap dan div luar fluida. Saya telah menambahkan jawaban di bagian bawah jika ada orang lain yang membutuhkannya.
damndaewoo

Jawaban:

63

Cobalah sesuatu seperti ini:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

div secara alami akan menggunakan lebar 100% dari penampungnya, tidak perlu menyetel lebar ini secara eksplisit. Dengan menambahkan margin kiri / kanan yang sama dengan dua div sisi, isinya sendiri dipaksa untuk duduk di antara keduanya.

Perhatikan bahwa "div tengah" berada setelah "div kanan" di HTML

Leigh
sumber
1
Saya rasa saya menemukan solusi yang lebih baik berdasarkan solusi (hebat) Anda :) lihat di bawah dalam jawaban yang saya berikan
Adrien Be
Adakah cara untuk melakukan ini tanpa mengubah urutan item? yaitu div kiri, div tengah, div kanan. Ini penting jika Anda ingin melakukan berbagai hal pada ukuran layar yang berbeda.
Eliezer Steinbock
Ya urutan kiri-kanan-tengah ini benar-benar triknya. Ini melarang div kanan tidak berada di bawah dua div, bukan?
Ansjovis86
50

Solusi terkini (Oktober 2014): siap untuk tata letak yang lancar

Pengantar:

Solusi ini bahkan lebih sederhana daripada yang disediakan oleh Leigh. Ini sebenarnya berdasarkan itu.

Di sini Anda dapat melihat bahwa elemen tengah (dalam kasus kami, dengan "content__middle"class) tidak memiliki properti dimensi yang ditentukan - tidak ada lebar, atau padding, atau properti terkait margin sama sekali - tetapi hanya overflow: auto;(lihat catatan 1).

Keuntungan besarnya adalah sekarang Anda dapat menentukan a max-widthdan a min-widthpada elemen kiri & kanan . Yang luar biasa untuk tata letak yang lancar .. maka tata letak responsif :-)

catatan 1: versus jawaban Leigh di mana Anda perlu menambahkan properti margin-left& margin-rightke "content__middle"kelas.

Kode dengan tata letak non-fluid:

Di sini elemen kiri & kanan (dengan kelas "content__left"dan "content__right") memiliki lebar tetap (dalam piksel): karenanya disebut tata letak non-fluid.

Demo Langsung di http://jsbin.com/qukocefudusu/1/edit?html,css,output

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content {
        width: 100%;
    }
    .content__left {
        width: 100px;
        float: left; /* [1] */
        background-color: #fcc;
    }
    .content__middle {
        background-color: #cfc;
        overflow: auto; /* [2] */
    }
    .content__right {
        width: 100px;
        float: right; /* [3] */
        background-color: #ccf;
    }
</style>

<div class="content">
    <div class="content__left">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

Kode dengan tata letak fluida:

Di sini elemen kiri & kanan (dengan kelas "content__left"dan "content__right") memiliki lebar variabel (dalam persentase) tetapi juga lebar minimum dan maksimum: maka disebut tata letak fluida.

Demo Langsung dalam tata letak yang lancar dengan max-widthproperti http://jsbin.com/runahoremuwu/1/edit?html,css,output

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content { 
        width: 100%; 
    }
    .content__left { 
        width: 20%; 
        max-width: 170px;  
        min-width: 40px;  
        float: left; /* [1] */
        background-color: #fcc; 
     }
    .content__middle { 
        background-color: #cfc; 
        overflow: auto; /* [2] */
    }
    .content__right { 
        width: 20%; 
        max-width: 250px; 
        min-width: 80px; 
        float: right; /* [3] */
        background-color: #ccf; 
    }
</style>

<div class="content">
    <div class="content__left">
        max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

Dukungan Browser

Diuji di BrowserStack.com pada browser web berikut:

  • IE7 ke IE11
  • Ff 20, Ff 28
  • Safari 4.0 (windows XP), Safari 5.1 (windows XP)
  • Chrome 20, Chrome 25, Chrome 30, Chrome 33,
  • Opera 20
Adrien Be
sumber
2
Saya akan merekomendasikan semua pengembang untuk menggunakan metode ini, terutama karena Desain Web Responsif telah menjadi kebutuhan. :)
aullah
1
Hati-hati dengan yang satu ini. Dalam beberapa kasus, scrollbar akan muncul di div content__middle di Firefox jika ketinggian tidak akurat karena overflow: auto;
Jason
Hai Jason, itu sangat menarik, terima kasih telah menunjukkannya. Bisakah Anda memberikan jsfiddle untuk menunjukkan contoh langsung saat ini terjadi?
Adrien Be
apakah ini karena overflowmembuat konteks pemformatan blok? akan display: flexmemiliki efek yang sama?
Jayen
1
Ya, benar. developer.mozilla.org/en-US/docs/Web/Guide/CSS/… sangat membantu. akhirnya menggunakan overflow-y: hiddenkarena a) lebar yang diizinkan untuk disetel, b) memiliki dukungan browser terbaik dan c) bukan tabel
Jayen
39

Flex-box adalah solusinya - dan mereka luar biasa. Saya sudah menginginkan sesuatu seperti ini dari css selama satu dekade. Yang Anda butuhkan hanyalah menambahkan display: flexgaya Anda untuk "Utama" dan flex-grow: 100(di mana 100 adalah sembarang - tidak penting bahwa itu tepat 100). Coba tambahkan gaya ini (warna ditambahkan untuk membuat efek terlihat):

<style>
    #Main {
        background-color: lightgray;
        display: flex;
    }

    #div1 {
        border: 1px solid green;   
        height: 50px; 
        display: inline-flex; 
    }
    #div2 {
        border: 1px solid blue;    
        height: 50px;
        display: inline-flex;
        flex-grow: 100;
    }
    #div3 {
        border: 1px solid orange;        
        height: 50px;
        display: inline-flex;
    }
</style>

Info lebih lanjut tentang kotak fleksibel di sini: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

BT
sumber
Flexbox memang bagus tetapi hanya membutuhkan ruang sebanyak yang dibutuhkan, bukan semua ruang yang tersisa. Jadi saya pergi dengan overflow: solusi otomatis.
ThinkBonobo
@ThinkBonobo apa yang Anda maksud dengan "itu"? Kotak fleksibel itu sendiri akan bertindak seperti 'blok', dan item di dalam kotak fleksibel pasti dapat memakan lebih banyak ruang daripada yang dibutuhkan.
BT
@BT itu artinya div pusat utama. Ini jelas merupakan solusi yang berfungsi untuk banyak kasus tetapi tidak untuk kasus penggunaan khusus saya.
ThinkBonobo
1
@ThinkBonobo Taruhan saya bisa membuatnya bekerja untuk Anda jika Anda memposting jsFiddle
BT
23

Gunakan properti CSS Flexbox flex-grow untuk mencapai ini.

.main {
  display: flex;
}
.col-1, .col-3 {
  width: 100px;
}
.col-2 {
  flex-grow: 1;
}
<div class="main">
  <div class="col-1" style="background: #fc9;">Left column</div>
  <div class="col-2" style="background: #eee;">Middle column</div>
  <div class="col-3" style="background: #fc9;">Right column</div>
</div>
Luaskan cuplikan

Reggie Pinkham
sumber
1
Jawaban terbaik tbh. Bekerja 4 tahun kemudian dan lebih bersih dari solusi lain. +1
Harry J
4

Meski bitterlambat memposting jawaban, berikut adalah pendekatan alternatif tanpa menggunakan margin.

<style>
    #divMain { width: 500px; }
    #div1 { width: 100px; float: left; background-color: #fcc; }
    #div2 { overflow:hidden; background-color: #cfc; }
    #div3 { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="div1">
        div 1
    </div>
    <div id="div3">
        div 3
    </div>
    <div id="div2">
        div 2<br />bit taller
    </div>
</div>

Metode ini bekerja seperti sihir, tapi berikut penjelasannya :) \

Bermain-main dengan contoh serupa di sini.

Cerah R Gupta
sumber
4

Div yang harus mengambil ruang yang tersisa haruslah sebuah kelas .. Div lainnya dapat berupa id tetapi harus memiliki lebar ..

CSS :

#main_center {
    width:1000px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    display:block;
}
#left {
    width:200px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    background:#c6f5c6;
    float:left;
}
.right {
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    overflow:hidden;
    background:#000fff;
}
.clear {
    clear:both;
}

HTML :

<body>
    <div id="main_center">
        <div id="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div>
</body>

Tautan berikut memiliki kode dalam tindakan, yang seharusnya menyelesaikan masalah cakupan area yang tersisa.

jsFiddle

Avishek Bose
sumber
1

Saya sedang mencari solusi untuk masalah sebaliknya di mana saya membutuhkan div lebar tetap di tengah dan div lebar fluida di kedua sisi, jadi saya datang dengan yang berikut dan berpikir saya akan mempostingnya di sini jika ada yang membutuhkannya.

#wrapper {
  clear: both;
  width: 100%;
}

#wrapper div {
  display: inline-block;
  height: 500px;
}

#center {
  background-color: green;
  margin: 0 auto;
  overflow: auto;
  width: 500px;
}

#left {
  float: left;
}

#right {
  float: right;
}

.fluid {
  background-color: yellow;
  width: calc(50% - 250px);
}
<div id="wrapper">
  <div id="center">
    This is fixed width in the centre
  </div>
  <div id="left" class="fluid">
    This is fluid width on the left
  </div>
  <div id="right" class="fluid">
    This is fluid width on the right
  </div>
</div>
Luaskan cuplikan

Jika Anda mengubah lebar #centerelemen, maka Anda perlu memperbarui properti lebar .fluidmenjadi:

width: calc(50% - [half of center width]px);
sialan
sumber