สอง divs หนึ่งความกว้างคงที่อีกอันที่เหลือ

ฉันมีคอนเทนเนอร์ div สองอัน

ในขณะที่ความกว้างหนึ่งต้องมีความกว้างเฉพาะ แต่ฉันก็ต้องปรับมันดังนั้น div อื่นจึงใช้พื้นที่ที่เหลือ มีวิธีใดบ้างที่ฉันสามารถทำได้?

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

ดู: http://jsfiddle.net/SpSjL/ (ปรับความกว้างของเบราว์เซอร์)

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

คุณสามารถทำได้ด้วยdisplay: tableซึ่งโดยปกติจะเป็นแนวทางที่ดีกว่า: ฉันจะวางองค์ประกอบอินพุตในบรรทัดเดียวกับป้ายกำกับได้อย่างไร

มันเป็น 2017 และวิธีที่ดีที่สุดที่จะทำคือการใช้ flexbox ซึ่งเป็น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>

คุณสามารถใช้ฟังก์ชัน calc () ของ CSS

การสาธิต: 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;   
}

หวังว่านี่จะช่วยคุณได้ !!

หากคุณสามารถพลิกคำสั่งในซอร์สโค้ดได้คุณสามารถทำได้ดังนี้:

HTML:

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

CSS:

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

ตัวอย่าง: http://jsfiddle.net/blineberry/VHcPT/

เพิ่มคอนเทนเนอร์และคุณสามารถทำได้ด้วยลำดับซอร์สโค้ดปัจจุบันของคุณและการกำหนดตำแหน่งที่แน่นอน:

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

นี่.leftdiv ได้รับการตั้งค่าโดยปริยายความกว้างจากtop, leftและรูปแบบที่ช่วยให้สามารถเติมช่องว่างที่เหลืออยู่ในright#container

ตัวอย่าง: http://jsfiddle.net/blineberry/VHcPT/3/

หากคุณสามารถห่อไว้ในภาชนะได้<div>คุณสามารถใช้การวางตำแหน่งเพื่อทำให้ด้านซ้าย<div>ทอดสมอได้left:0;right:250pxโปรดดูการสาธิตนี้ ตอนนี้ฉันจะบอกว่าสิ่งนี้จะใช้ไม่ได้ใน IE6 เนื่องจากมีเพียงมุมเดียวเท่านั้นที่<div>สามารถวางตำแหน่งได้อย่างสมบูรณ์บนหน้าเว็บ ( ดูคำอธิบายทั้งหมดที่นี่ )

1- มี div wrapper ตั้งค่า padding และ margin ตามที่คุณต้องการ
2- ทำให้ด้านซ้ายแบ่งตามความกว้างที่คุณต้องการและทำให้มันลอยไปทางซ้าย
3- กำหนดระยะขอบ div ด้านขวาให้เท่ากับความกว้างด้านซ้าย

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

หวังว่านี่จะเหมาะกับคุณ!

มีหลายวิธีในการบรรลุผลกำไรเชิงลบเป็นหนึ่งในรายการโปรดของฉัน:

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

โชคดี!

ตั้งค่าทางขวาของคุณเป็นความกว้างที่ระบุแล้วลอยทางด้านซ้ายของคุณเพียงตั้งค่าระยะขอบขวาเป็น 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
}

หากคุณต้องการโซลูชันข้ามเบราว์เซอร์คุณสามารถใช้แนวทางของฉันที่ชัดเจนและง่ายดาย

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

ใช้วิธีง่ายๆนี้สามารถช่วยคุณได้

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