Perluas div ke lebar maksimal saat float: left disetel

115

Saya punya sesuatu seperti itu:

<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>

kedua pelampung itu diperlukan. Saya ingin div konten memenuhi seluruh layar dikurangi 100px untuk menu. Jika saya tidak menggunakan float div mengembang persis seperti yang seharusnya. Tapi bagaimana cara mengatur ini saat float diatur? Jika saya menggunakan sth like

style=width:100%

lalu div konten mendapatkan ukuran induknya, yang berupa body atau div lain yang juga saya coba, dan tentu saja tidak sesuai di kanan menu dan kemudian ditampilkan di bawah.

html width Flo
sumber

Jawaban:

138

Harap saya mengerti Anda dengan benar, lihat ini: http://jsfiddle.net/EAEKc/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      margin-left: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>
Luaskan cuplikan

merkuro
sumber
5
Pertanyaannya menyatakan "kedua pelampung itu diperlukan".
Crescent Fresh
8
Ya, Anda benar dan saya setuju. Namun saya pikir Flo hanya menyebutkan ini, karena menurutnya mereka berdua! diperlukan untuk mendapatkan tata letak yang diinginkan dan solusi alternatif saya.
merkuro
@merkuro: poin yang bagus. Saya setuju, ".right" tidak perlu diapungkan untuk mendapatkan efek yang diinginkan. @ Flo: dapatkah Anda mengonfirmasi, haruskah div konten di-float? Suka karena alasan lain?
Crescent Fresh
mungkin berhasil saya akan mencoba sedikit dengan itu, Anda punya alasan yang benar, dan pelampungnya lebih bagus, tapi saya pikir itu tidak akan berhasil
Flo
2
Ahh jeah dan saya sekali lagi melihat alasan mengapa saya mengubahnya menjadi float: Ie7 dan Firefox baik-baik saja, tetapi yaitu 5.5 dan ie 6 mulai margin di tepi kanan div kiri, jadi itu memiliki 236px (lebar sebenarnya, 100 adalah contoh) gap antara kedua div
Flo
100

Cara yang paling cocok untuk silang yang saya temukan untuk melakukan ini tidak terlalu jelas. Anda perlu menghapus float dari kolom kedua, dan menerapkannya overflow:hidden. Meskipun ini tampaknya menyembunyikan konten apa pun yang berada di luar div, ini sebenarnya memaksa div untuk tetap berada di dalam induknya.

Menggunakan kode Anda, ini adalah contoh bagaimana hal itu dapat dilakukan:

<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>

Semoga ini bermanfaat bagi siapa pun yang mengalami masalah ini, yang menurut saya berfungsi paling baik untuk situs yang saya buat, setelah mencoba menyesuaikannya dengan resolusi lain. Sayangnya, ini tidak berfungsi jika Anda menyertakan pelampung kanan divsetelah konten juga, jika ada yang tahu cara yang baik untuk membuatnya berfungsi, dengan kompatibilitas IE yang baik, saya akan sangat senang mendengarnya.

Opsi baru yang lebih baik menggunakan display: flex;

Sekarang model Flexbox diimplementasikan secara luas, saya sebenarnya akan merekomendasikan untuk menggunakannya, karena model ini memungkinkan lebih banyak flexkesibukan dengan tata letak. Berikut dua kolom sederhana seperti aslinya:

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex: 1;">content</div>
</div>

Dan inilah tiga kolom dengan kolom tengah lebar fleksibel!

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex:1;">content</div>
    <div style="width: 100px;">sidebar</div>
</div>
alanaktion
sumber
Setelah beberapa pengujian lebih lanjut, tampaknya Anda tidak perlu memicu hasLayout dengan "position: relative" agar ini berfungsi di IE 6, saya tidak yakin tentang IE 5, tetapi umumnya tidak masalah untuk menyertakannya, hanya untuk amannya.
alanaktion
1
Jawaban ini sepertinya tidak dihargai, tetapi sangat menyenangkan untuk diketahui. Yang ini memungkinkan Anda mengapung, bahkan dengan elemen mengambang di dalam div. Saya adalah "memblokir konteks pemformatan" di Google. sekarang juga.
Carlos Gil
Cara terbaik adalah dengan menggunakan tabel 2 cols sederhana daripada membuang-buang waktu menambahkan banyak trik CSS yang tidak kompatibel dengan browser lintas-browser
Marco Demaio
@Marco Saya perlu menggunakan CSS untuk ini karena desain saya responsif. Ukuran layar yang berbeda membutuhkan tata letak yang berbeda, sehingga tabel tidak akan berfungsi. Selain itu, metode ini tampaknya berfungsi pada dasarnya di semua browser yang masih digunakan siapa pun.
alanaktion
1
@MarcoDemaio, maksud saya adalah bahwa pada ukuran layar di mana kolom tetap yang lebih kecil akan sebesar kolom utama, seperti pada perangkat seluler, saya ingin dua kolom menjadi baris dengan lebar penuh, yang tidak dapat dilakukan dengan tabel kecuali saya ingin benar-benar memindahkan konten dengan JavaScript.
alanaktion
31

Solusi tanpa menetapkan ukuran pada margin Anda

.content .right{
    overflow: auto; 
    background-color: red;
}

1 untuk Merkuro, tetapi jika ukuran float berubah, margin tetap Anda akan gagal. Jika Anda menggunakan CSS di atas di sebelah kanan, divukurannya akan berubah dengan baik dengan mengubah ukuran di float kiri. Sedikit lebih fleksibel seperti itu. Periksa biola di sini: http://jsfiddle.net/9ZHBK/144/

Melayu
sumber
2
@alanaktion Saya mengambil otomatis yang tidak perlu. Perbedaannya terletak pada nilai luapan. Ternyata overflow: hiddendan overflow automengakibatkan perilaku yang sama. Saya juga berpikir orang-orang menghargai Biola.
Layu
Jika ada yang ingin tahu mengapa ini berhasil, lihat di sini: stackoverflow.com/a/1767270/2756409
TylerH
Saya pikir ini lebih baik daripada solusi merkuro.
SkuraZZ
6

Elemen yang di-float dikeluarkan dari tata letak aliran normal, dan elemen blok, seperti DIV, tidak lagi menjangkau lebar induknya. Aturan berubah dalam situasi ini. Alih-alih menemukan kembali roda, lihat situs ini untuk beberapa kemungkinan solusi untuk membuat tata letak dua kolom yang Anda cari: http://www.maxdesign.com.au/presentation/page_layouts/

Secara khusus, "tata letak Dua Kolom Cair".

Bersulang!

Sean Aitken
sumber
4

Ini adalah solusi terbaru untuk HTML 5 jika ada yang tertarik & tidak suka "mengambang".

Tabel berfungsi dengan baik dalam kasus ini karena Anda dapat mengatur lebar tetap ke tabel & sel tabel. 

.content-container{
    display: table;
    width: 300px;
}

.content .right{
    display: table-cell;   
    background-color:green;
    width: 100px;
}

http://jsfiddle.net/EAEKc/596/ kode sumber asli dari @merkuro

Snowie
sumber
+1 akhirnya sesuatu yang bekerja dengan elemen lebar tetap di sebelah kanan, meskipun secara teknis tidak menggunakan float.
Karthik T
+1 jadi benar-benar ya. setelah bertahun-tahun berjuang dengan float dan posisi dan tabel, ini adalah solusi yang tepat. solusi yang diterima menyebarkan css yang tidak aman.
horace
4

penggunaan ini dapat menyelesaikan masalah Anda.

width: calc(100% - 100px);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      float: left;
      width: calc(100% - 100px);
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>
Luaskan cuplikan

suathd
sumber
Selamat datang di SO. Bisakah Anda menambahkan penjelasan tentang cara kerjanya?
yacc
3

Dan berdasarkan merkurosolusi, jika Anda ingin memaksimalkan yang di kiri, Anda harus menggunakan:

<!DOCTYPE html>   
<html lang="en">     
    <head>              
        <meta "charset="UTF-8" />   
        <title>Content with Menu</title>                 
        <style>
            .content .left {
                margin-right: 100px;
                background-color: green;
            }
            .content .right {
                float: right;
                width: 100px;
                background-color: red;
            }
        </style>              
    </head>
    <body>        
        <div class="content">
            <div class="right">  
                <p>is</p>
                <p>this</p>
                <p>what</p>
                <p>you are looking for?</p>
            </div>
            <div class="left">
                <p>Hi, Flo!</p>
            </div>
        </div>
    </body>
</html>

Belum diuji di IE, jadi mungkin terlihat rusak di IE.

kubilayeksioglu
sumber
1

Jawaban yang diterima mungkin berhasil, tetapi saya tidak suka gagasan tentang margin yang tumpang tindih. Di HTML5, Anda akan melakukannya dengan display: flex;. Ini solusi yang bersih. Cukup atur lebar untuk satu elemen dan flex-grow: 1;untuk elemen dinamis. Versi yang diedit dari biola merkuros: https://jsfiddle.net/EAEKc/1499/

Christoph Bühler
sumber
0

Hai, ada cara mudah dengan metode tersembunyi melimpah di elemen yang tepat.

    .content .left {
        float:left;
        width:100px;
        background-color:green;
      }
      .content .right {
        overflow: hidden;
        background-color:red;
      }
<!DOCTYPE html>   
<html lang="en">     
    <head>      
           
        <title>Content Menu</title>         
          
    </head>
    <body>    
    <div class="content">
      <div class="left">
        <p>Hi, Flo! I am Left</p>
      </div>
      <div class="right">  
        <p>is</p>
        <p>this</p>
        <p>what</p>
        <p>you are looking for?</p>
        <p> It done with overflow hidden and result is same.</p>
      </div>
    </div>
    </body>
</html>
Luaskan cuplikan

Sanjib Debnath
sumber
-1

Ini mungkin berhasil: 

    div{
    display:inline-block;
    width:100%;
    float:left;
    }
kirtan-shah
sumber