ลอยเคียงข้างกันขนาดไดนามิก

HTML ของฉันเป็นดังนี้:

<div id="list-container"> </div>
<div id="button-container"> </div>

และ CSS สำหรับ div ทั้งสองนี้:

#button-container {
    float: right;
    width: 100px;
    height: 100%;
    background-color: #f5f5f5;
}

#list-container {
    float: left;
    height: 100%;
    background-color: #FAD275;
}

div ทั้งสองนี้อยู่เคียงข้างกันและมีความสูงเท่ากัน button-container div อยู่ทางด้านขวาและต้องมีความกว้างคงที่ที่ 100px อย่างไรก็ตาม div ด้านซ้ายชื่อ list-container ต้องมีความกว้างเท่ากับพื้นที่ที่เหลือซึ่งจัดสรรโดยคอนเทนเนอร์หลัก ตัวอย่างเช่น หาก div หลักของฉันมีความกว้าง 400px และ button-container div ใช้เวลา 100px จากนั้น ฉันควรจะสามารถระบุบางอย่าง เช่น height: 100% สำหรับ list-container div และมีความกว้างเท่ากับ 300px ได้

กฎข้อที่ 1 ที่แน่นอนคือฉันไม่สามารถตั้งค่าความกว้างคงที่สำหรับ list-container div ได้ div พาเรนต์สำหรับสิ่งทั้งหมดนี้สามารถปรับขนาดได้แบบไดนามิก ดังนั้นเด็กทุกคนที่อยู่ข้างใต้จะต้องได้รับการออกแบบให้ปรับขนาดด้วยเหตุใดจึงมีคำถามนี้

โปรดทราบว่าทั้งหมดนี้ดำเนินการในส่วนขยายของ Google Chrome ดังนั้นฉันจึงสามารถเข้าถึง HTML5 และ CSS3 ได้ ฉันไม่จำเป็นต้องกังวลเกี่ยวกับการรองรับข้ามเบราว์เซอร์ด้วย ฉันต้องการให้สิ่งนี้ใช้งานได้ใน Chrome เท่านั้น

ใครสามารถช่วยฉันหาวิธีทำให้ list-container เติมพื้นที่ที่เหลือของคอนเทนเนอร์หลักโดยไม่ต้องใช้ความกว้างคงที่


google-chrome html css google-chrome-extension
person void.pointer    schedule 18.09.2011    source แหล่งที่มา

คำตอบ (3)


arrow_upward
2
arrow_downward

คุณสามารถใช้คุณสมบัติ CSS display: table; และ display: table-cell;

วิธีนี้จะเลียนแบบวิธีที่ตารางจัดการแถว แต่จะนำไปใช้กับ div

คุณจะต้องมี div wrapper แต่นั่นคือมาร์กอัปพิเศษทั้งหมดที่คุณต้องการ

HTML

<div class="wrap">
<div id="list-container">list container </div>
<div id="button-container">button container </div>
</div>

ซีเอสเอส:

.wrap
{
    display: table;
    width: 100%;
    height: 100%;
}

#button-container {
    display: table-cell;
    width: 100px;
    height: 100%;
    background-color: #f5f5f5;
}

#list-container {
    display: table-cell;
    height: 100%;
    background-color: #FAD275;
}

ดูตัวอย่างของฉันที่นี่

person Kyle    schedule 18.09.2011
comment
ฉันลองสิ่งนี้แล้ว แต่ด้วยเหตุผลบางอย่างในรหัสจริงของฉันมันไม่ทำงาน ฉันเพิ่มปุ่มไปที่ button-container ของฉัน และปุ่มนั้นถูกผลักไปที่ด้านล่างด้วยเหตุผลบางประการ ใครสามารถอธิบายเรื่องนี้ได้บ้าง? นี่คือโค้ด: jsfiddle.net/p4dvU/9 - person void.pointer; 18.09.2011
comment
ควรอยู่ที่ด้านบนสุดภายใน button-container นี่คือตำแหน่งที่ปกติจะวางไว้โดยไม่ต้องแนะนำ display: table - person void.pointer; 18.09.2011
comment
เพียงเพิ่ม vertical-align: top; ลงในคอนเทนเนอร์ของปุ่ม และเนื่องจากหมายเหตุ <ul> ไม่ใช่แท็กปิดตัวเองที่ถูกต้อง jsfiddle.net/Kyle_Sevenoaks/p4dvU/11 - person Kyle; 18.09.2011
comment
ขอบคุณไคล์ ฉันไม่ใช่นักพัฒนาเว็บที่มีประสบการณ์ ดังนั้นฉันจึงขอขอบคุณสำหรับคำแนะนำต่างๆ สำหรับการอ้างอิงในอนาคต มีรายการแท็กปิดตัวเองที่ถูกต้องอยู่ที่ไหนสักแห่งหรือไม่ - person void.pointer; 18.09.2011
comment
Kyle การจัดแนวตั้งช่วยในเรื่องคอนเทนเนอร์ปุ่ม แต่ด้วยเหตุผลบางอย่างคอนเทนเนอร์รายการของฉันจึงมีความสูงเพียง 230px แทนที่จะเป็น 250px เมื่อฉันลบ display: table-cell; มันกลับไปเป็น 250px เหมือนที่ควรและยังคงดูดีอยู่ จะปลอดภัยไหมที่จะลบแอตทริบิวต์การแสดงผลเซลล์ตารางออกจากรายการคอนเทนเนอร์ของฉัน เหตุใดจึงหายไป 20px ที่ด้านล่างของ div นี้ ดูเหมือนว่าจะถือเป็นการเติมแม้ว่าการเติมจะมี 0 ในเครื่องมือพัฒนาเว็บของ Chrome - person void.pointer; 18.09.2011
comment
ลบจอแสดงผล: สัมบูรณ์; เนื่องจากไม่ใช่คุณสมบัติ css จึงเป็น display: block/*or other options*/; หรือตำแหน่ง: สัมบูรณ์/*ตัวเลือกอื่นๆ*/ และตั้งค่าช่องว่างภายในเป็น 0 บนตัวเครื่อง jsfiddle.net/Kyle_Sevenoaks/p4dvU/13 - person Kyle; 18.09.2011
comment
ขอบคุณสำหรับข้อเสนอแนะ ฉันพบว่า box-sizing: border-box; บน #list ของฉันทำให้เกิดปัญหา ฉันไม่รู้ว่าทำไม แต่การลบออกจะแก้ไขได้ :) - person void.pointer; 18.09.2011

arrow_upward
0
arrow_downward

ไซต์นี้อาจเป็นประโยชน์กับคุณ:

http://glish.com/css/

person Steve Wellens    schedule 18.09.2011
comment
คุณช่วยชี้ให้เห็นว่าบทความใดที่ฉันควรจะสนใจเป็นพิเศษ - person void.pointer; 18.09.2011

arrow_upward
0
arrow_downward

ตั้งค่าคอนเทนเนอร์ด้านซ้ายเป็น 100% และกำหนดระยะขอบด้านขวาเป็น 100px คำตอบเดิมของฉันก็บอกว่าเติมด้วย แต่นั่นผิด ระยะขอบสร้างพื้นที่สำหรับ div ด้านขวาแบบลอยตัว เปอร์เซ็นต์ความกว้างช่วยให้ div ด้านซ้ายปรับขนาดแบบไดนามิกได้

person mrtsherman    schedule 18.09.2011
comment
จริงๆ แล้วฉันไม่สามารถทำงานนี้ได้เลย ไม่ว่าฉันจะพยายามทำอะไร แม้ว่าจะมีระยะขอบ 100px บน list-container แต่ปุ่มคอนเทนเนอร์ของฉันก็ถูกผลักออกและค้างอยู่ใต้ div หลักของฉัน ฉันไม่สามารถทำให้พวกเขาอยู่เคียงข้างกันได้ - person void.pointer; 18.09.2011