Float: left ayarlandığında div'i maksimum genişliğe genişlet

115

Bende bunun gibi bir şey var:

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

her iki şamandıra da gereklidir. Content div'in tüm ekranı eksi menü için 100px'i doldurmasını istiyorum. Float kullanmazsam, div tam olarak olması gerektiği gibi genişler. Fakat float ayarlandığında bunu nasıl ayarlarım? Gibi kullanırsam

style=width:100%

daha sonra içerik div üst öğenin boyutunu alır, bu ya body ya da denediğim başka bir div'dir ve bu nedenle tabii ki menünün sağına sığmaz ve aşağıda gösterilir.

html  width 
— Flo
kaynak

Yanıtlar:

138

Umarım sizi doğru anladım, şuna bir bakın: 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>
Snippet'i genişlet

— merkuro
kaynak
5
Soru "her iki şamandıranın da gerekli olduğunu" belirtir.
— Crescent Fresh
8
Evet haklısın ve kabul ediyorum. Ancak Flo'nun bundan bahsettiğini düşünüyorum çünkü ikisinin de öyle olduğunu düşünüyor! İstenilen düzeni ve dolayısıyla alternatif çözümümü elde etmem gerekiyordu.
— merkuro
@merkuro: iyi nokta. Katılıyorum, istenen etkiyi elde etmek için ".right" ın yüzdürülmesi gerekmiyor. @Flo: içerik div'in yüzdürülmesi gerektiğini onaylar mısınız? Başka nedenlerle mi?
— Crescent Fresh
işe yarayabilir bununla biraz deneyeceğim, bu nedeni doğru anladınız ve şamandıra daha güzel, ama işe yaramayacağını anladım
— Flo
2
Ahh jeah ve ben onu float olarak değiştirmemin nedenini bir kez daha görüyoruz: Ie7 ve Firefox iyi yapıyor, ancak 5.5 ve ie 6, sol div'in sağ kenarındaki marjı başlatıyor, bu nedenle 236px (gerçek genişlik, 100 bir örnekti) iki div arasındaki fark
— Flo
100

Bunu yapmanın en çapraz uyumlu yolu çok açık değil. Şamandırayı ikinci sütundan kaldırmanız ve overflow:hiddenona başvurmanız gerekir. Bu, div'in dışına çıkan herhangi bir içeriği saklıyor gibi görünse de, aslında div'i üst öğesi içinde kalmaya zorlar.

Kodunuzu kullanarak, bunun nasıl yapılabileceğine dair bir örnek:

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

Umarım bu, bu sorunu yaşayan herkes için yararlıdır, diğer çözümlere uyum sağlamaya çalıştıktan sonra, oluşturduğum site için en iyi sonucu bulduğum şey budur. Ne yazık ki, diviçeriğin arkasına bir de doğru kayan nokta eklerseniz bu işe yaramaz, iyi bir IE uyumluluğu ile bunu çalıştırmanın iyi bir yolunu bilen biri varsa, bunu duymaktan çok mutlu olurum.

Kullanarak yeni, daha iyi seçenek display: flex;

Artık Flexbox modeli oldukça yaygın bir şekilde uygulandığına göre, bunun yerine kullanmayı tavsiye ederim, çünkü flexdüzen ile çok daha fazla esneklik sağlıyor . İşte orijinaline benzer basit bir iki sütun:

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

Ve burada esnek genişlikte bir merkez sütuna sahip üç sütun var!

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex:1;">content</div>
    <div style="width: 100px;">sidebar</div>
</div>
— alanaktion
kaynak
Biraz daha fazla test yaptıktan sonra, IE 6'da çalışması için hasLayout'u "position: relative" ile tetiklemenize gerek olmadığı anlaşılıyor, IE 5 hakkında emin değilim, ancak yine de dahil etmek genellikle bir sorun değil, sadece güvenli olmak için.
— alanaktion
1
Bu cevaplar takdir edilmemiş gibi görünüyor, ancak bilmek gerçekten güzel. Bu, div içinde yüzen bir öğe olsa bile yüzmenize izin verir. "Biçimlendirme bağlamını engelle" google'ım. şimdi.
— Carlos Gil
En iyi yol, tarayıcılar arası uyumlu olmayan tonlarca CSS numarası ekleyerek zaman harcamak yerine basit bir 2 sütun tablosu kullanmaktır
— Marco Demaio
@Marco Tasarımım duyarlı olduğundan bunun için CSS kullanmam gerekiyordu. Farklı ekran boyutları farklı düzenler gerektiriyordu, bu yüzden bir tablo çalışmazdı. Ayrıca, bu yöntem, temelde hala herkesin kullandığı herhangi bir tarayıcıda işe yarıyor gibi görünüyor.
— alanaktion
1
@MarcoDemaio, demek istediğim, küçük sabit sütunun yaklaşık olarak ana sütun kadar büyük olacağı bir ekran boyutunda, örneğin bir mobil cihazda, iki sütunun tam genişlikte satırlar olmasını istedim, bu yapılamadı JavaScript ile içeriği gerçekten taşımak istemediğim sürece tablolarla.
— alanaktion
31

Kenar boşluğunuzda boyutu sabitlemeden çözüm

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

Merkuro için +1, ancak şamandıranın boyutu değişirse, sabit marjınız başarısız olur. Sağda CSS'nin üstünü kullanırsanız div, sol float'ta değişen boyutla boyutu güzel bir şekilde değiştirecektir. Bunun gibi biraz daha esnektir. Keman için burayı kontrol edin: http://jsfiddle.net/9ZHBK/144/

— Wilt
kaynak
2
@alanaktion Gereksiz arabayı elimden aldım. Fark, taşma değerindedir. Görünüşe göre overflow: hiddenve overflow autoaynı davranışla sonuçlanıyor. Ayrıca insanların Fiddle'ı takdir ettiğini düşünüyorum.
— Wilt
Bunun neden işe yaradığını bilmek isteyen varsa, buraya bakın: stackoverflow.com/a/1767270/2756409
— TylerH
Bunun merkuro'nun çözümünden daha iyi olduğunu düşünüyorum.
— SkuraZZ
6

Yüzen öğeler normal akış düzeninin dışına çıkarılır ve DIV'ler gibi blok öğeler artık üst öğelerinin genişliğini kapsamaz. Bu durumda kurallar değişir. Tekerleği yeniden icat etmek yerine, peşinde olduğunuz iki sütun düzenini oluşturmak için bazı olası çözümler için bu siteye bakın: http://www.maxdesign.com.au/presentation/page_layouts/

Özellikle "Sıvı İki Sütunlu düzen".

Şerefe!

— Sean Aitken
kaynak
4

Bu, "kayan" ile ilgilenen ve sevmeyen biri varsa, HTML 5 için güncellenmiş bir çözümdür.

Masa ve masa hücresine sabit genişliği ayarlayabildiğiniz için tablo bu durumda harika çalışıyor. 

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

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

http://jsfiddle.net/EAEKc/596/ @ merkuro'dan orijinal kaynak kodu

— Snowie
kaynak
+1 nihayet teknik olarak float kullanmasa bile sağdaki sabit genişlikli elemanla çalışan bir şey.
— Karthik T
+1 yani tamamen evet. Yüzer, pozisyon ve masalarla yıllarca uğraştıktan sonra, bu doğru çözümdür. kabul edilen çözüm güvenli olmayan css'yi yayıyor.
— horace
4

bu kullanım sorununuzu çözebilir.

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>
Snippet'i genişlet

— suathd
kaynak
SO'ya hoş geldiniz. Bunun nasıl çalıştığına dair bir açıklama ekleyebilir misiniz?
— yacc
3

Ve merkuroçözümüne göre, soldakini büyütmek istiyorsanız, şunu kullanmalısınız:

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

IE'de test edilmediğinden, IE'de bozuk görünebilir.

— kubilayeksioglu
kaynak
1

Kabul edilen cevap işe yarayabilir, ancak örtüşen kenar boşlukları fikrinden hoşlanmıyorum. HTML5'te bunu ile yaparsınız display: flex;. Temiz bir çözüm. Sadece bir öğe ve flex-grow: 1;dinamik öğe için genişliği ayarlayın . Merkuros kemanının düzenlenmiş bir versiyonu: https://jsfiddle.net/EAEKc/1499/

— Christoph Bühler
kaynak
0

Merhaba, sağ öğede taşma gizli yönteminin kolay bir yolu var.

    .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>
Snippet'i genişlet

— Sanjib Debnath
kaynak
-1

Bu işe yarayabilir: 

    div{
    display:inline-block;
    width:100%;
    float:left;
    }
— kirtana-Şah
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.