สร้าง div เติมความกว้างที่เหลือ

Question 1

ฉันจะสร้าง div เติมความกว้างที่เหลือได้อย่างไร

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

ฉันdiv2จะเติมส่วนที่เหลือได้อย่างไร?

Question 2

ลองใช้สิ่งนี้:

<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 จะใช้ความกว้าง 100% ของคอนเทนเนอร์โดยไม่จำเป็นต้องกำหนดความกว้างนี้อย่างชัดเจน การเพิ่มระยะขอบซ้าย / ขวาให้เหมือนกับ div ทั้งสองด้านเนื้อหาของตัวเองจะถูกบังคับให้นั่งระหว่างกัน

โปรดทราบว่า "div กลาง" จะอยู่หลัง "div ด้านขวา" ใน HTML

Question 3

โซลูชันล่าสุด (ตุลาคม 2014): พร้อมสำหรับการจัดวางแบบไหล

บทนำ:

วิธีนี้ง่ายกว่าวิธีที่มีให้ด้วยLeighซ้ำ มันขึ้นอยู่กับมันจริง

ที่นี่คุณสามารถสังเกตเห็นว่าองค์ประกอบกลาง (ในกรณีของเรามี"content__middle"ระดับ) ไม่ได้มีทรัพย์สินใด ๆ ที่ระบุมิติ - ไม่กว้างหรือ padding หรือสถานที่ให้บริการที่เกี่ยวข้องกับอัตรากำไรขั้นต้นที่ทั้งหมด - แต่เพียงoverflow: auto;(ดูหมายเหตุ 1)

ข้อดีคือตอนนี้คุณสามารถระบุ a max-widthและ a min-widthให้กับองค์ประกอบทางซ้ายและขวาของคุณได้แล้ว ซึ่งยอดเยี่ยมสำหรับเลย์เอาต์ของไหล .. ดังนั้นเค้าโครงที่ตอบสนอง :-)

หมายเหตุ 1: เทียบกับคำตอบของ Leigh ที่คุณต้องเพิ่มmargin-left& margin-rightคุณสมบัติใน"content__middle"ชั้นเรียน

โค้ดที่มีเค้าโครงแบบไม่ลื่นไหล:

ที่นี่องค์ประกอบด้านซ้ายและขวา (มีคลาส"content__left"และ"content__right") มีความกว้างคงที่ (เป็นพิกเซล) จึงเรียกว่าเลย์เอาต์แบบไม่ไหล

การสาธิตสดบนhttp://jsbin.com/qukocefudusu/1/edit?html,css,output

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

รหัสที่มีรูปแบบของเหลว:

ที่นี่องค์ประกอบด้านซ้ายและขวา (มีคลาส"content__left"และ"content__right") มีความกว้างตัวแปร (เป็นเปอร์เซ็นต์) แต่ยังมีความกว้างต่ำสุดและสูงสุดด้วยเช่นกันจึงเรียกว่าเลย์เอาต์แบบไหล

Live Demo ในรูปแบบที่ลื่นไหลพร้อมmax-widthคุณสมบัติhttp://jsbin.com/runahoremuwu/1/edit?html,css,output

<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 บนเว็บเบราว์เซอร์ต่อไปนี้:

IE7 เป็น IE11
Ff 20, Ff 28
Safari 4.0 (Windows XP), Safari 5.1 (Windows XP)
Chrome 20, Chrome 25, Chrome 30, Chrome 33,
โอเปร่า 20

Question 4

Flex-box คือทางออกและมันยอดเยี่ยมมาก ฉันต้องการอะไรแบบนี้จาก css มานานกว่าทศวรรษแล้ว สิ่งที่คุณต้องมีคือเพิ่มdisplay: flexสไตล์ของคุณสำหรับ "หลัก" และflex-grow: 100(โดยที่ 100 เป็นแบบตามอำเภอใจ - ไม่สำคัญว่าจะต้องเท่ากับ 100) ลองเพิ่มสไตล์นี้ (สีที่เพิ่มเพื่อให้มองเห็นเอฟเฟกต์):

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

ข้อมูลเพิ่มเติมเกี่ยวกับกล่องดิ้นที่นี่: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Question 5

ใช้คุณสมบัติCSS Flexbox flex-growเพื่อให้บรรลุสิ่งนี้

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

ขยายข้อมูลโค้ด

Question 6

แม้ว่าจะbitโพสต์คำตอบช้า แต่นี่เป็นอีกทางเลือกหนึ่งโดยไม่ต้องใช้ระยะขอบ

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

วิธีนี้ใช้ได้ผลเหมือนเวทมนตร์ แต่นี่คือคำอธิบาย:) \

ซอกับตัวอย่างที่คล้ายกันที่นี่

Question 7

Div ที่ต้องใช้พื้นที่ที่เหลือจะต้องเป็น class .. div อื่น ๆ สามารถเป็น id ได้ แต่ต้องมีความกว้าง ..

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>

ลิงก์ต่อไปนี้มีโค้ดที่ใช้งานได้ซึ่งจะช่วยแก้ปัญหาการครอบคลุมพื้นที่ที่เหลือได้

jsFiddle

Question 8

ฉันกำลังมองหาวิธีแก้ปัญหาตรงข้ามที่ฉันต้องการ div ความกว้างคงที่ตรงกลางและ div ความกว้างของของไหลที่ด้านใดด้านหนึ่งดังนั้นฉันจึงคิดสิ่งต่อไปนี้และคิดว่าฉันจะโพสต์ไว้ที่นี่เผื่อมีใครต้องการ

#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องค์ประกอบคุณต้องอัปเดตคุณสมบัติความกว้าง.fluidเป็น:

width: calc(50% - [half of center width]px);