552

Her birinin değişken genişliğe sahip olabileceği iki sütunlu bir div düzeni istiyorum

div {
  float: left;
}

.second {
  background: #ccc;
}

<div>Tree</div>
<div class="second">View</div>

Snippet'i genişlet

'Görünüm' div 'ağaç' div gerekli alanı doldurduktan sonra kullanılabilir tüm genişliği genişletmek istiyorum.

Şu anda, 'görünüm' div'ım içerdiği içeriğe göre yeniden boyutlandırılıyor Her iki div de tüm yüksekliği kaplarsa iyi olur.

Yinelenen feragatname:

Kayan nokta: sol ayarlandığında sol genişlik sabit bir genişliğe sahip olduğundan div öğesini maksimum genişliğe genişletin .
Div ile ilgili yardım - div kalan genişliğe sığdır çünkü her ikisi de sola hizalanmış iki sütuna ihtiyacım var

html css multiple-columns

— Anurag Uniyal
kaynak

1

ilgili stackoverflow.com/a/22719552/759452

— Adrien Be

1

Ya soruyu anlamıyorum ya da kabul edilen cevabı nasıl seçtiğinizi anlamıyorum, çünkü hem genişlikler hem de yükseklikleroverflow hidden

— 21:17

1013

Bu çözüm değil de, çok kolay aslında bütün aşikar. Şamandıralarla belirli bir şekilde etkileşime giren "blok biçimlendirme bağlamı" (BFC) adı verilen bir şeyi tetiklemeniz gerekir.

Sadece ikinci div'i alın, şamandırayı çıkarın ve onun overflow:hiddenyerine verin . Görünür dışındaki herhangi bir taşma değeri, ayarlandığı bloğun bir BFC olmasını sağlar. BFC'ler, soyundan gelen yüzenlerin onlardan kaçmasına izin vermez ve kardeş / ataların yüzenlerinin onlara girmesine izin vermez. Buradaki net etki, yüzen divın işini yapmasıdır, o zaman ikinci div , şamandıra tarafından işgal edilenler hariç tüm mevcut genişliği alarak sıradan bir blok olacaktır .

IE6 ve 7'de hasLayout'u tetiklemeniz gerekebilir, ancak bu tüm mevcut tarayıcılarda çalışmalıdır.

Demos:

Sabit Sol: http://jsfiddle.net/A8zLY/5/
Sabit Hak: http://jsfiddle.net/A8zLY/2/

— Xanthir
kaynak

28

Mükemmel cevap! Ancak "auto dışında herhangi bir taşma değeri" demek BFC yaparsanız yanılıyorsunuz. Kastettiğiniz, varsayılan (görünür) dışındaki herhangi bir taşma değerinin bir BFC olmasını sağlayacaktır. Aslında, taşma otomatik de mükemmel çalışır - bu tavsiye ederim (sadece bu div dışına bakmak nispeten konumlandırılmış öğeleri varsa).

— BT

52

Bu makalenin güzel bir açıklaması var: colinaarts.com/articles/the-magic-of-overflow-hidden

— Max Cantor

1

İçerik div'den taşacak kadar büyükse ne olur?

— giannis christofakis

11

Çocukların düzeninin önemli olduğunu belirtmek önemlidir. Sabit genişliğe sahip kayan eleman diğerinin üzerinde olmalıdır. Anlamak için çok uzun sürdü, neden anahtarlamalı düzende benim için çalışmadı.

— Riplexus

2

David ve Boris tarafından verilen yanıtlara dayanarak, her şeyin görünür olmayan bir taşmasının neden bir BFC'yi tetiklediğini açıklayan bir cevap yazdım: stackoverflow.com/questions/9943503/… Benim yorumum doğru muydu?

— BoltClock

104

Sadece esnek kutuların büyüsünü keşfettim (display: flex). Bunu dene:

<style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

Flex kutuları bana css'in 15 yıldır sahip olmasını istediğim kontrolü veriyor. O sonunda burada! Daha fazla bilgi: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

— BT
kaynak

Ne keşfettiğinizi bilmiyorum, ancak kodunuz en son Chrome'da çalışmıyor jsfiddle.net/fjb548kw/3

— Yevgeniy Afanasyev

@YevgeniyAfanasyev "şamandıra: sol;" sorunu düzeltmek için. Not için teşekkürler!

— BT

Teşekkür ederim. flex-grow: 100;Bunun yerine neden sahip olduğunuzu açıklayabilir misiniz flex-grow: 1;?

— Yevgeniy Afanasyev

2

@YevgeniyAfanasyev Bunu yapmaktan başka bir sebep yok. Yüzde olarak düşünmeme izin veriyor, bu yüzden #a için set gibi bir şey yapabilirsem flex-grow:10ve sonra # flex-grow: 90b'yi satırın genişliğinin% 10'u ve #b çizginin genişliğinin% 90'ı olacak şekilde ayarlardım. Başka hiçbir elemanın esnek genişlik stili yoksa, teknik olarak ne koyduğunuz önemli değildir.

— BT

bu benim için en iyi şekilde çalıştı, sanki bir giriş ve düğmeyi yan yana yerleştirmeye çalışıyorlarmış gibi.

— Souleste

28

Flexbox çözümü

Bu özellik ne flex-growiçindir.

html, body {
  height: 100%;
}
body {
  display: flex;
}
.second {
  flex-grow: 1;
}

<div style="background: #bef;">Tree</div>
<div class="second" style="background: #ff9;">View</div>

Snippet'i genişlet

Not: Desteklenen tarayıcılarınız tarafından isteniyorsa esnek satıcı önekleri ekleyin .

— Reggie Pinkham
kaynak

27

Bu, tablolarla ilgisi olmayan ve CSS ile yapması zor (imkansız değilse, en azından tarayıcılar arası anlamda) iyi bir örnek olacaktır.

Her iki sütun da sabit genişlik olsaydı, bu kolay olurdu.

Sütunlardan biri sabit genişlik olsaydı, bu biraz daha zor ama tamamen yapılabilir olurdu.

Her iki sütun değişken genişliğinde IMHO yalnızca iki sütunlu bir tablo kullanmanız gerekir.

— cletus
kaynak

11

Tablo, sağ taraftaki sütunun küçük cihazlarda solun altında kaymasını istediğiniz duyarlı bir tasarımda çok iyi olmayacaktır.

— S ..

1

Tablolarla çalışmak için bazı duyarlı tasarım hileleri vardır: css-tricks.com/responsive-data-tables

— Rikki

Şimdi sık sık iki ayrı mizanpajı tamamen tasarlama ve medya sorgularını kullanarak bir mobil cihazda değişiklik display:none;yapma eğilimindeyim ve kayan bir ölçekte mümkün olduğunca% 100 yanıt verirken bazen dokunmatik ekran hissi veren bir mobil kullanım için tasarımınızı tamamen değiştirmek daha güzel. ve düğme stili.

— Bysander

22

Bu çözümü inceleyin

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}

<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>

Snippet'i genişlet

— angel.dimitrov
kaynak

2

Bu genellikle üstün bir çözümdür çünkü taşma işleminin gizlenmesi her zaman istenmez.

— Joseph Lennox

3

OP başına: "Her birinin değişken genişliğe sahip olabileceği iki sütunlu bir div düzeni istiyorum". Cevabınızda, ilk sütunun genişliğini bilmelisiniz, bu yüzden değişken değildir. Her iki sütuna da sabit genişlikler ayarlayabilir ve bunları sadece yüzebilirsiniz.

— Jacob Alvarez

17

Kullanım calc:

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}

<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

Snippet'i genişlet

Buradaki sorun, tüm genişliklerin açıkça bir değer (px ve em iyi çalışır) veya açıkça tanımlanmış bir şeyin yüzdesi olarak tanımlanması gerektiğidir.

— joel Moses
kaynak

15

İşte, bu yardımcı olabilir ...

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="clear" />
  </div>
</body>

</html>

Snippet'i genişlet

— a6hi5h3k
kaynak

+1, örneğin örneğiniz işe yarıyor gibi görünüyor, ancak gerçek senaryomda, 'view' içeriklerinin 'tree' div'e nasıl süründüğü, ağaç div% 100 olmadığı için, bazı javascript onu küçük olmaya ve ağaç yüksekliğinden sonra zorlayabilir İçeriği gör

— Anurag Uniyal

Bu durumda, sol sütunun maksimum genişliğini biliyorsanız, u bir stil maksimum genişliği verebilir (IE'de çalışmaz) veya sol kenar boşluğu düşünebilir (IE'de çift kenar boşluğuna dikkat edin) veya padding-left.

— a6hi5h3k

Bu harikaydı! Bir kerelik bir çözüm olarak in-line kullanıyorum:<div class="clear" style="clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px;"></div>

— ajwest

5

İnsanların neden eski TABLEetiketi kullanarak SO EASY olan basit sütunlu düzenler için saf bir CSS çözümü bulmak için bu kadar sıkı çalışmaya istekli olduklarını anlamıyorum .

Tüm Tarayıcılar hala masa düzeni mantığına sahiptir ... Bana belki bir dinozor deyin, ama size yardımcı olmasına izin verin diyorum.

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>

Snippet'i genişlet

Tarayıcılar arası uyumluluk açısından da çok daha az riskli.

— patm
kaynak

2

evet, ama eğer her şey css tarafından yapılıyorsa, neden olmasın, en azından eğer bir merak varsa?

— Anurag Uniyal

2

Çünkü media-queriesher iki sütunu da küçük cihazlarda üst üste koymak istiyorsanız , eski tableetiketle imkansızdır . Bunu yapmak için CSStablo stilleri uygulamanız gerekir . Bu nedenle, günümüzde CSSherhangi bir ekran boyutu için duyarlı bir düzen istiyorsanız bunu çözmek daha iyidir .

— ElChiniNet

5

Diğer sütunun genişliği sabitse, tüm yaygın tarayıcılarda çalışan calc CSS işlevini kullanmaya ne dersiniz :

width: calc(100% - 20px) /* 20px being the first column's width */

Bu şekilde ikinci sıranın genişliği hesaplanır (yani kalan genişlik) ve duyarlı bir şekilde uygulanır.

— anit
kaynak

Bu, örneğin flexbox'tan başka bir şey kullanmak kadar iyi bir cevaptır css-grid. Ayrıca position: fixedmükemmel seçim etrafında yapar hangi ile çalışır ! Teşekkür ederim!

— Bartekus

3

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="right">View</div>
    <div style="width: <=100% getTreeWidth()100 %>">Tree</div>
    <div class="clear" />
  </div>
  <div class="ColumnWrapper">
    <div class="ColumnOneHalf">Tree</div>
    <div class="ColumnOneHalf">View</div>
  </div>

</body>

</html>

Snippet'i genişlet

— A.Pramod Kumar
kaynak

Solda sabit öğeler, sağda sabit öğeler ve soldaki alanın tamamını kullanan bir mesaj satırı gibi bir durum çubuğu gibi bir şey istiyorum. Bu cevapla başladım ve şamandıra SONRA mesajımı div ekledim: height: 20px; beyaz boşluk: nowrap; taşma: gizli; metin taşması: klip

— englebart

3

CSS Izgara Düzeni'ni deneyebilirsiniz .

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}

<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>

Snippet'i genişlet

— kanon
kaynak

2

flex-grow - Bu, bir flex öğesinin gerekirse büyümesini tanımlar. Oran olarak hizmet eden birimsiz bir değeri kabul eder. Esnek konteynerin içindeki kullanılabilir alanın ne kadarını alması gerektiğini belirler.

Tüm öğelerin esnek büyümesi 1 olarak ayarlanmışsa, kapta kalan alan tüm çocuklara eşit olarak dağıtılacaktır. Çocuklardan birinin değeri 2 ise, kalan alan diğerlerinden iki kat daha fazla yer kaplar (veya en azından dener). Daha fazlasını burada görün

.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}

<div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>

Snippet'i genişlet

— Stanislav Ostapenko
kaynak

1

Biraz farklı bir uygulama,

İki div paneli (içerik + ekstra), yan yana mevcut content paneldeğilse genişler extra panel.

jsfiddle: http://jsfiddle.net/qLTMf/1722/

— Rao
kaynak

1

Pat - Haklısın. Bu yüzden bu çözüm hem "dinozorları" hem de çağdaşları tatmin edecektir. :)

.btnCont {
  display: table-layout;
  width: 500px;
}

.txtCont {
  display: table-cell;
  width: 70%;
  max-width: 80%;
  min-width: 20%;
}

.subCont {
  display: table-cell;
  width: 30%;
  max-width: 80%;
  min-width: 20%;
}

<div class="btnCont">
  <div class="txtCont">
    Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
  </div>
  <div class="subCont">
    This column as well as the entire container works like a table. Isn't Amazing!!!
  </div>
</div>

Snippet'i genişlet

— johnmanoahs
kaynak

2

Css class .ip için html referansı yoktur ve IE7'de çalışmaz

— Keith K

1

W3'ün CSS kitaplığını, bunu sağlayan bir sınıf içeren kullanabilirsiniz rest:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-row">
  <div class="w3-col " style="width:150px">
    <p>150px</p>
  </div>
  <div class="w3-rest w3-green">
    <p>w3-rest</p>
  </div>
</div>

Snippet'i genişlet

Sayfanın CSS kitaplığını bağlamayı unutmayın header:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

İşte resmi demo: W3 Okul Deneme Editörü

— manar
kaynak

Görünüşe göre sadece "taşma: gizli" ekler, bu da zaten verilen cevabın daha kötü bir versiyonudur

— vpzomtrrfrt

0

Bu beklediğiniz yanıt olup olmadığından emin değilim, ama neden Tree'nin genişliğini 'auto' ve 'View' genişliğini% 100 olarak ayarlamıyorsunuz?

3

Çünkü bu ikinci şamandırayı birinci altına koyacaktır çünkü çok geniş.

— cletus

0

Mevcut CSS mizanpaj çerçevelerine bir göz atın. Simpl tavsiye ederim veya biraz daha karmaşık Blueprint çerçevesini .

Simpl (yalnızca bir simpl.css dosyasını içe aktarmayı içerir ) kullanıyorsanız, bunu yapabilirsiniz:

<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>

, 50-50 düzen için veya:

<div class="ColumnOneQuarter">Tree</div>
<div class="ColumnThreeQuarters">View</div>

25-75 tane için.

Bu kadar basit.

her iki sütun da değişken genişlikte

— Anurag Uniyal

0

Simpl.css fişi için teşekkürler!

tüm sütunlarınızı ColumnWrapperbu şekilde sarmayı unutmayın .

<div class="ColumnWrapper">
    <div class="ColumnOneHalf">Tree</div>
    <div class="ColumnOneHalf">View</div>
</div>

Simpl.css 1.0 sürümünü yayınlamak üzereyim, bu yüzden sözcüğü yaymaya yardımcı olun!

— kaba tüylü
kaynak

0

Ben jQuery $ (belge) .ready () çağrı bir javascript işlevi yazdı. Bu, üst div öğesinin tüm alt öğelerini ayrıştırır ve yalnızca en doğru çocuğu güncelleştirir.

html

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

javaScript

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left")) 
                     + parseInt($(this).css("border-left-width")) 
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right")) 
                     + parseInt($(this).css("border-right-width")) 
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}

— bcr666
kaynak

0

Bu flexbox kullanarak oldukça kolaydır. Aşağıdaki snippet'e bakın. Akışı kontrol etmek ve küresel bir yükseklik ayarlamak için bir ambalaj kabı ekledim. Öğeleri tanımlamak için sınırlar da eklenmiştir. Div'lerin artık gerektiği gibi tam yüksekliğe genişlediğine dikkat edin. Henüz tam olarak desteklenmediğinden satıcı önekleri flexbox için gerçek dünya senaryosunda kullanılmalıdır.

Flexbox kullanarak mizanpajları anlamak ve tasarlamak için ücretsiz bir araç geliştirdim. Buradan kontrol edin: http://algid.com/Flex-Designer

.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}

<div class="container">
    <div>Tree</div>
    <div class="second">View</div>
</div>

Snippet'i genişlet

— Mario Vázquez
kaynak

sizinkini eklemeden önce TÜM önceki cevapları okudunuz mu? Hayır görünüyor ...

— Temani Afif

Bir yan not olarak, eklemeniz gerekmez, stretchçünkü varsayılan değerdir ve alt eleman esnek kabı yapmaya gerek yoktur, bu nedenle display:flexiç elemanlar için işe yaramaz

— Temani Afif

Acaba neden herhangi bir yorum yapmadan downvote. Bu cevap soruya cevap vermiyor mu? Neden? Başkalarına yardım etmeye çalışmak cezalandırılırsa, bir sonraki

— Mario Vázquez

1

downvote sonra iki yorum var, bu yeterli değil mi?

— Temani Afif

Temari, aracımı kontrol ettin mi? Yararlı olduğunu ve başkalarına yardımcı olabileceğini düşünmüyor musunuz? Sizce soru ile ilgili değil mi? Bu soruya cevabınız nerede? Göremiyorum. Buradaki rolün nedir?

— Mario Vázquez

-3

Her iki genişlik de değişken uzunluktaysa, neden biraz komut dosyası veya sunucu tarafı ile genişliği hesaplamıyorsunuz?

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>

— amischiefr
kaynak

3

Sunucu, istemcinin düzen motorunun nasıl çalışacağını nasıl biliyor?

— Kev

Basit: orada tarayıcıların% 90'ı için geliştirin :) IE 7+, FF3 + ve Safari CSS 3 desteği. Standart IE6 <! - [eğer IE 6] ise> öğesini de ekleyebilirsiniz. Bu arada, hangi tarayıcı style = "width:%"?

— amischiefr

Nasıl sunucu tarafında yapılabilir bilmiyorum, ama evet bazı javscript yapabilir ama css / html yapamaz sürece önlemek istiyorum

— Anurag Uniyal

Hangi yapamaz. Bu nedenle, her ikisinin de dinamik olmasını istiyorsanız, komut dosyası veya sunucu tarafında yapmalısınız.

— amischiefr

Kalan genişliği doldurmak için bir div öğesini genişletin

Flexbox çözümü