วิธีการวาง div ข้างกัน

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

มีหลายวิธีในการทำสิ่งที่คุณต้องการ:

1. ใช้คุณสมบัติCSSfloat :

   <div style="width: 100%; overflow: hidden;">
       <div style="width: 600px; float: left;"> Left </div>
       <div style="margin-left: 620px;"> Right </div>
   </div>

2. การใช้คุณสมบัติCSSdisplay - ซึ่งสามารถใช้เพื่อทำให้การdivกระทำเหมือนtable:

   <div style="width: 100%; display: table;">
       <div style="display: table-row">
           <div style="width: 600px; display: table-cell;"> Left </div>
           <div style="display: table-cell;"> Right </div>
       </div>
   </div>

มีวิธีการเพิ่มเติม แต่ทั้งสองเป็นที่นิยมมากที่สุด

CSS3 แนะนำกล่องแบบยืดหยุ่น (aka. flex box) ซึ่งสามารถบรรลุพฤติกรรมนี้ได้

เพียงแค่กำหนดความกว้างของ div แรกและจากนั้นให้เป็นครั้งที่สองflex-growมูลค่าของ1ซึ่งจะช่วยให้มันเพื่อเติมเต็มความกว้างที่เหลืออยู่ของผู้ปกครอง

.container{
    display: flex;
}
.fixed{
    width: 200px;
}
.flex-item{
    flex-grow: 1;
}

<div class="container">
  <div class="fixed"></div>
  <div class="flex-item"></div>
</div>

การสาธิต jsFiddle

โปรดทราบว่ากล่องแบบยืดหยุ่นไม่สามารถใช้กับเบราว์เซอร์รุ่นเก่าได้ แต่เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการกำหนดเป้าหมายเบราว์เซอร์รุ่นใหม่ (ดูCaniuseและMDN ) มีคู่มือที่ดีเกี่ยวกับวิธีการใช้กล่องเฟล็กซ์ที่มีอยู่ในเคล็ดลับ CSS

ฉันไม่รู้อะไรมากเกี่ยวกับกลยุทธ์การออกแบบ HTML และ CSS แต่ถ้าคุณกำลังมองหาอะไรที่ง่ายและมันจะพอดีกับหน้าจอโดยอัตโนมัติ (อย่างที่ฉันเป็น) ฉันเชื่อว่าวิธีแก้ปัญหาที่ตรงไปตรงมาที่สุดคือการทำให้ div ทำงานเป็นคำ ย่อหน้า. ลองระบุdisplay: inline-block

<div style="display: inline-block">
   Content in column A
</div>
<div style="display: inline-block">
   Content in column B
</div>

คุณอาจจะหรืออาจไม่จำเป็นต้องระบุความกว้างของ DIV

คุณสามารถใช้กริด CSS เพื่อทำสิ่งนี้ได้นี่เป็นเวอร์ชั่นยาวสำหรับวัตถุประสงค์ในการแสดงภาพประกอบ:

div.container {
    display: grid;
    grid-template-columns: 220px 20px auto;
    grid-template-rows: auto;
}

div.left {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: row1-start
    grid-row-end: 3;
    background-color: Aqua;
}

div.right {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end; 1;
    background-color: Silver;
}

div.below {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end; 2;
}

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="below">Below</div>
</div>

หรือวิธีการแบบดั้งเดิมมากขึ้นโดยใช้ลอยและระยะขอบ

ฉันได้รวมสีพื้นหลังไว้ในตัวอย่างนี้เพื่อช่วยแสดงว่าสิ่งต่าง ๆ อยู่ที่ใดและจะทำอย่างไรกับเนื้อหาด้านล่างพื้นที่ลอย

อย่าใส่สไตล์ของคุณแบบอินไลน์ในชีวิตจริงแยกออกเป็นสไตล์ชีท

div.left {
    width: 200px;
    float: left;
    background-color: Aqua;
}

div.right {
    margin-left: 220px;
    background-color: Silver;
}

div.clear {
    clear: both;
}

    <div class="left"> Left </div>
    <div class="right"> Right </div>
    <div class="clear">Below</div>

<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>

ให้ div แรกลอยไปทางซ้ายแล้วจับจ้องกับ div ที่สองที่กว้าง 100% ทุ่นลอยซ้าย นั่นควรทำเคล็ดลับ หากคุณต้องการวางรายการด้านล่างคุณต้องมีความชัดเจนทั้งในรายการที่คุณต้องการวางด้านล่าง

<div class="container" style="width: 100%;">
    <div class="sidebar" style="width: 200px; float: left;">
        Sidebar
    </div>
    <div class="content" style="margin-left: 202px;">
        content 
    </div>
</div>

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

หากคุณไม่ได้ติดแท็ก IE6 ให้ลอยที่สอง<div>และให้ระยะห่างเท่ากับ (หรืออาจใหญ่กว่า) เล็กน้อยก่อน<div>ความกว้างคงที่ของเล็กน้อย

HTML:

<div id="main-wrapper">
    <div id="fixed-width"> lorem ipsum </div>
    <div id="rest-of-space"> dolor sit amet </div>
</div>

CSS:

#main-wrapper {
    100%;
    background:red;
}
#fixed-width {
    width:100px;
    float:left
}
#rest-of-space {
    margin-left:101px;
        /* May have to increase depending on borders and margin of the fixd width div*/
    background:blue;
}

ระยะขอบบัญชีสำหรับความเป็นไปได้ที่ 'พื้นที่พักผ่อน' <div>อาจมีเนื้อหามากกว่า 'ความกว้างคงที่'<div>'ความกว้างคงที่'

อย่าให้พื้นหลังมีความกว้างคงที่ หากคุณต้องการเห็นสิ่งเหล่านี้อย่างชัดเจนว่าเป็น 'คอลัมน์' ที่แตกต่างกันจากนั้นใช้เคล็ดลับคอลัมน์มารยาท