Hai div, một chiều rộng cố định, cái còn lại, phần còn lại

Tôi có hai thùng chứa div.

Trong khi một div cần có chiều rộng cụ thể, tôi cần điều chỉnh nó để div kia chiếm phần còn lại của không gian. Có cách nào tôi có thể làm điều này?

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

Xem: http://jsfiddle.net/SpSjL/ (điều chỉnh độ rộng của trình duyệt)

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;
}

Bạn cũng có thể làm điều đó với display: table, đây thường là một cách tiếp cận tốt hơn: Làm cách nào để đặt một phần tử đầu vào trên cùng một dòng với nhãn của nó?

Đó là năm 2017 và cách tốt nhất để làm điều đó là sử dụng flexbox, tương thích với IE10 + .

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

Bạn có thể sử dụng hàm calc () của CSS.

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;   
}

Hy vọng điều này sẽ giúp bạn!!

Nếu bạn có thể lật thứ tự trong mã nguồn, bạn có thể làm như sau:

HTML:

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

CSS:

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

Ví dụ: http://jsfiddle.net/blineberry/VHcPT/

Thêm một vùng chứa và bạn có thể làm điều đó với thứ tự mã nguồn hiện tại và định vị tuyệt đối:

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;
}

Ở đây, .leftdiv được một chiều rộng ngầm định từ top, leftvà rightphong cách cho phép nó để lấp đầy khoảng trống còn lại trong #container.

Ví dụ: http://jsfiddle.net/blineberry/VHcPT/3/

Nếu bạn có thể bọc chúng trong một thùng chứa, <div>bạn có thể sử dụng định vị để làm cho bên trái được <div>neo tại left:0;right:250px, hãy xem bản trình diễn này . Bây giờ tôi sẽ nói rằng điều này sẽ không hoạt động trong IE6 vì chỉ một góc của a <div>có thể được định vị tuyệt đối trên một trang ( xem ở đây để giải thích đầy đủ).

1- Có div wrapper, đặt padding và margin theo ý muốn
2- Đặt div bên trái có chiều rộng bạn cần và làm cho nó nổi bên trái
3- Đặt lề div bên phải bằng chiều rộng bên trái

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

Hy vọng điều này làm việc cho bạn!

Có khá nhiều cách để thực hiện, lợi nhuận âm là một trong những mục yêu thích của tôi:

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

Chúc may mắn!

đặt bên phải của bạn thành chiều rộng cụ thể và làm nổi nó, ở bên trái bạn chỉ cần đặt lề phải thành 250px

.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
}

Nếu bạn cần một giải pháp trình duyệt chéo, bạn có thể sử dụng cách tiếp cận của tôi, rõ ràng và dễ dàng.

.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;
}

Sử dụng đơn giản này có thể giúp bạn

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