İki div, biri sabit genişlikte, diğeri, geri kalanı

İki div konteynerim var.

Birinin belirli bir genişliğe sahip olması gerekirken, onu ayarlamam gerekiyor, böylece diğer div boşluğun geri kalanını kaplıyor. Bunu yapmamın bir yolu var mı?

.left {
    float: left;
    width: 83%;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    margin-right: 10px;
    overflow: auto;
}

.right {
    float: right;
    width: 16%;
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    height: 100%;
    overflow: auto;
}

<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->

Bakınız: http://jsfiddle.net/SpSjL/ (tarayıcının genişliğini ayarlayın)

HTML:

<div class="right"></div>
<div class="left"></div>

CSS:

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

Bunu display: table, genellikle daha iyi bir yaklaşımla da yapabilirsiniz : Bir girdi öğesini etiketiyle aynı satıra nasıl yerleştirebilirim?

2017 yılı ve bunu yapmanın en iyi yolu IE10 + uyumlu flexbox kullanmaktır .

.box {
  display: flex;
}

.left {
  flex: 1;  /* grow */
  border: 1px dashed #f0f;
}

.right {
  flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
  border: 1px dashed #00f;
}

<div class="box">
  <div class="left">Left</div>
  <div class="right">Right 250px</div>
</div>

CSS'nin calc () Fonksiyonunu kullanabilirsiniz.

Demo: http://jsfiddle.net/A8zLY/543/

<div class="left"></div>
<div class="right"></div>

.left {
height:200px;
width:calc(100% - 200px);
background:blue;
float:left;
}

.right {
width:200px;
height:200px;
background:red;
float:right;   
}

Umarım bu sana yardımcı olur !!

Siparişi kaynak kodda çevirebilirseniz, şu şekilde yapabilirsiniz:

HTML:

<div class="right"></div> // needs to be 250px    
<div class="left"></div>

CSS:

.right {
  width: 250px;
  float: right;
}   

Bir örnek: http://jsfiddle.net/blineberry/VHcPT/

Bir kap ekleyin ve bunu mevcut kaynak kodu sıralamanız ve mutlak konumlandırma ile yapabilirsiniz:

HTML:

<div id="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS:

#container {
  /* set a width %, ems, px, whatever */
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  right: 250px;
}

.right {
  position: absolute;
  background: red;
  width: 250px;
  top: 0;
  right: 0;
}

Burada .leftdiv bir örtülü set genişliğini alır top, leftve rightbunun içinde kalan boşluğu doldurmak için izin verir stilleri #container.

Örnek: http://jsfiddle.net/blineberry/VHcPT/3/

Bunları bir konteynere sarabiliyorsanız <div>, solun <div>sabitlenmesi için konumlandırmayı kullanabilirsiniz left:0;right:250px, bu demoya bakın . Şimdi bunun IE6'da çalışmayacağını söyleyeceğim, çünkü <div>bir sayfanın sadece bir köşesi bir sayfada kesinlikle konumlandırılabilir ( tam açıklama için buraya bakın ).

1- Bir sarmalayıcı div yapın, dolguyu ve kenar boşluğunu istediğiniz gibi ayarlayın
2- Sol kenarı ihtiyacınız olan genişliğe bölün ve sola kaymasını sağlayın
3- Sağ kenar boşluğunu sol kenar genişliğine eşit ayarlayın

.left
{
    ***width:300px;***
    float: left;
    overflow:hidden;

}

.right
{
    overflow: visible;
    ***margin-left:300px;***
}



<div class="wrapper">
    <div class="left">
        ...
    </div>

    <div class="right" >
        ...
    </div>

</div>

Umarım bu sizin için çalışır!

Başarmanın epeyce yolu var, negatif marjlar favorilerimden biri:

http://www.alistapart.com/articles/negativemargins/

İyi şanslar!

sağınızı belirli genişliğe ayarlayın ve yüzün, solunuzda sadece sağ kenar boşluğunu 250 piksele ayarlayın

.left {
vertical-align: middle;
min-height: 50px;
margin-right: 250px;
overflow: auto

}

.right {
width:250px;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto
}

Çapraz tarayıcı çözümüne ihtiyacınız varsa, benim yaklaşımımı açık ve kolay bir şekilde kullanabilirsiniz.

.left{
        position: absolute;
        height: 150px;
        width:150px;
        background: red;
        overflow: hidden;
        float:left;
}
.right{
        position:relative;
        height: 150px;
        width:100%;
        background: red;
        margin-left:150px;
        background: green;
        float:right;
}

Size yardımcı olabilecek basitliği kullanın

<table width="100%">
    <tr>
         <td width="200">fix width</td>
         <td><div>ha ha, this is the rest!</div></td>
    </tr>
</table>