Kalan genişliği nasıl doldurabilirim?
<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>
Kalanı nasıl div2doldurabilirim?
Yanıtlar:
Bunun gibi bir şey deneyin:
<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'ler doğal olarak kapsayıcılarının genişliğinin% 100'ünü kaplar, bu genişliği açıkça ayarlamaya gerek yoktur. İki yan bölmeyle aynı olan bir sol / sağ kenar boşluğu ekleyerek, kendi içeriği aralarında oturmaya zorlanır.
HTML'de "orta div" in "sağ div" den sonra geldiğine dikkat edin
Bu çözüm, tarafından sağlanandan daha basittir Leigh. Aslında buna dayanıyor.
Burada, ortadaki elemanın (bizim durumumuzda, "content__middle"sınıfla birlikte) herhangi bir boyutsal özelliğe sahip olmadığını fark edebilirsiniz - genişlik, dolgu veya kenar boşluğu ile ilgili hiçbir özellik yoktur - sadece bir overflow: auto;(not 1'e bakın).
En büyük avantajı, artık sol ve sağ öğeleriniz için a max-widthve a belirtebilmenizdirmin-width . Akıcı düzenler için harika olan ... dolayısıyla duyarlı düzen :-)
not 1: margin-left& margin-rightözelliklerini "content__middle"sınıfa eklemeniz gereken Leigh'in cevabına karşı .
Burada (sınıfları ile sağ ve sol elemanları "content__left"ve "content__right") bir olması sabit genişlik (piksel): dolayısıyla adı sıvı olmayan bir düzen.
Http://jsbin.com/qukocefudusu/1/edit?html,css,output'ta Canlı Demo
<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>
Burada (sınıfları ile sağ ve sol elemanları "content__left"ve "content__right") bir olması değişken bir genişliğe (yüzde olarak), ancak, aynı zamanda, bir minimum ve maksimum genişliği: dolayısıyla sıvı düzeni olarak adlandırılan.
Http://jsbin.com/runahoremuwu/1/edit?html,css,outputmax-width özellikleriyle değişken bir düzende Canlı Demo
<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>
BrowserStack.com'da aşağıdaki web tarayıcılarında test edilmiştir:
overflowblok biçimlendirme bağlamı oluşturması mı? olur display: flexaynı etkiye sahip?
overflow-y: hidden) o a)), b ayarlanacak genişliği izin iyi tarayıcı desteği ve c olduğu gibi bir tablo değildi
Flex kutuları çözüm - ve harikalar. On yıldır css dışında böyle bir şey istiyorum. Tek ihtiyacınız display: flexolan "Ana" ve flex-grow: 100(100'ün keyfi olduğu - tam olarak 100 olması önemli değil) tarzınıza eklemektir . Bu stili eklemeyi deneyin (efekti görünür kılmak için eklenen renkler):
<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>
Esnek kutular hakkında daha fazla bilgiyi burada bulabilirsiniz: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Bunu flex-grow başarmak için CSS Flexbox özelliğini kullanın.
.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>bitCevap vermede gecikmiş olsa da , burada marj kullanmadan alternatif bir yaklaşım var.
<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>
Bu yöntem sihir gibi çalışır, ancak işte bir açıklama:) \
Kalan alanı kaplaması gereken Div bir sınıf olmalıdır .. Diğer div'ler id (ler) olabilir ancak genişlikleri olmalıdır ..
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>
Aşağıdaki bağlantı, kalan alan kapsama sorununu çözmesi gereken eylem halindeki kodu içerir.
Merkezde sabit bir genişlik div ve her iki tarafta da bir akışkan genişlik divine ihtiyacım olan karşıt soruna bir çözüm arıyordum, bu yüzden aşağıdakileri buldum ve birinin ihtiyacı olursa diye buraya göndereceğimi düşündüm.
#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>#centerÖğenin genişliğini değiştirirseniz, genişlik özelliğini şu şekilde güncellemeniz gerekir .fluid:
width: calc(50% - [half of center width]px);