เค้าโครง div 2 คอลัมน์: คอลัมน์ด้านขวาที่มีความกว้างคงที่ของเหลวด้านซ้าย

ความต้องการของฉันคือง่าย: 2 คอลัมน์ที่หนึ่งที่เหมาะสมมีขนาดคงที่ น่าเสียดายที่ฉันไม่พบโซลูชันที่ใช้งานได้ทั้งใน stackoverflow และ Google แต่ละโซลูชันที่อธิบายไว้นั้นล้มเหลวหากฉันนำไปใช้ในบริบทของตัวเอง ทางออกปัจจุบันคือ:

div.container {
    position: fixed;
    float: left;
    top: 100px;
    width: 100%;
    clear: both;
}

#content {
    margin-right: 265px;
}

#right {
    float: right;
    width: 225px;
    margin-left: -225px;
}

#right, #content {
    height: 1%; /* fixed for IE, although doesn't seem to work */
    padding: 20px;
}

<div class="container">
    <div id="content">
        fooburg content
    </div>
    <div id="right">
        test right
    </div>
</div>

ฉันได้รับรหัสข้างต้นต่อไปนี้:

|----------------------- -------|
| fooburg content  |            |
|-------------------------------|
|                  | test right | 
|----------------------- -------|

กรุณาแนะนำ ขอบคุณมาก!

ลบทุ่นในคอลัมน์ซ้าย

ที่โค้ด HTML คอลัมน์ด้านขวาจะต้องอยู่ข้างหน้าคอลัมน์ด้านซ้าย

ถ้าด้านขวามีการลอย (และความกว้าง) และถ้าคอลัมน์ด้านซ้ายไม่มีความกว้างและไม่มีการลอยก็จะมีความยืดหยุ่น :)

ใช้overflow: hiddenความสูงและความสูง (เป็นแบบอัตโนมัติ) กับ div ด้านนอกเพื่อให้ล้อมรอบ div ทั้งสองด้าน

สุดท้ายที่คอลัมน์ด้านซ้ายเพิ่ม a width: autoและoverflow: hiddenทำให้คอลัมน์ด้านซ้ายเป็นอิสระจากทางขวา (ตัวอย่างเช่นถ้าคุณปรับขนาดหน้าต่างเบราว์เซอร์และคอลัมน์ด้านขวาแตะที่คอลัมน์ด้านซ้ายโดยไม่มีคุณสมบัติเหล่านี้คอลัมน์ด้านซ้ายจะทำงาน จัดให้ถูกต้องด้วยคุณสมบัตินี้มันยังคงอยู่ในพื้นที่ของมัน)

ตัวอย่าง HTML:

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible width
    </div>
</div>

CSS:

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}​​

ตัวอย่างที่นี่: http://jsfiddle.net/jackJoe/fxWg7/

ดูhttp://www.alistapart.com/articles/negativemargins/นี่คือสิ่งที่คุณต้องการ ( ตัวอย่าง 4ตรงนั้น)

<div id="container">
    <div id="content">
        <h1>content</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
        <p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
    </div>
</div>

<div id="sidebar">
    <h1>sidebar</h1>
    <ul>
        <li>link one</li>
        <li>link two</li>
    </ul>
</div>

#container {
    width: 100%;
    background: #f1f2ea url(background.gif) repeat-y right;
    float: left;
    margin-right: -200px;
}
#content {
    background: #f1f2ea;
    margin-right: 200px;
}
#sidebar {
    width: 200px;
    float: right;

ที่ดีที่สุดเพื่อหลีกเลี่ยงการวางคอลัมน์ด้านขวาก่อนทางซ้ายเพียงใช้ระยะขอบขวาเป็นลบ

และเป็น "ตอบสนอง" โดยรวมการตั้งค่า @ สื่อเพื่อให้คอลัมน์ด้านขวาอยู่ด้านซ้ายบนหน้าจอที่แคบ

<div style="background: #f1f2ea;">
  <div id="container">
    <div id="content">
        <strong>Column 1 - content</strong>
    </div>
  </div>
  <div id="sidebar">
    <strong>Column 2 - sidebar</strong>
  </div>
<div style="clear:both"></div>

<style type="text/css">
#container {
    margin-right: -300px;
    float:left;
    width:100%;
}
#content {
    margin-right: 320px; /* 20px added for center margin */
}
#sidebar {
    width:300px;
    float:left
}
@media (max-width: 480px) {
    #container {
        margin-right:0px;
        margin-bottom:20px;
    }
    #content {
        margin-right:0px;
        width:100%;
    }
    #sidebar {
        clear:left;
    }
}
</style>

วิธีที่ง่ายและยืดหยุ่นที่สุดในการใช้งานจนถึงปัจจุบันtable display:

HTML, div ซ้ายมาก่อน div ขวามาสอง ... เราอ่านและเขียนจากซ้ายไปขวาดังนั้นมันจะไม่สมเหตุสมผลเลยที่จะวาง div ขวาไปซ้าย

<div class="container">
    <div class="left">
        left content flexible width
    </div>
    <div class="right">
        right content fixed width
    </div>
</div>

CSS:

.container {
  display: table;
  width: 100%;
}

.left {
  display: table-cell;
  width: (whatever you want: 100%, 150px, auto)
}​​

.right {
  display: table-cell;
  width: (whatever you want: 100%, 150px, auto)
}

ตัวอย่างกรณี:

// One div is 150px fixed width ; the other takes the rest of the width
.left {width: 150px} .right {width: 100%}

// One div is auto to its inner width ; the other takes the rest of the width
.left {width: 100%} .right {width: auto}

ฉันต้องการแนะนำวิธีแก้ปัญหาที่ยังไม่ได้กล่าว: ใช้ CSS3 calc()เพื่อผสม%และpxหน่วย calc()ปัจจุบันมีการรองรับที่ยอดเยี่ยมและช่วยให้สามารถสร้างเค้าโครงที่ค่อนข้างซับซ้อนได้อย่างรวดเร็ว

นี่คือลิงค์JSFiddleสำหรับโค้ดด้านล่าง

HTML:

<div class="sidebar">
  sidebar fixed width
</div>
<div class="content">
  content flexible width
</div>

CSS:

.sidebar {
    width: 180px;
    float: right;
    background: green;
}

.content {
    width: calc(100% - 180px);
    background: orange;
}

และนี่คืออีกหนึ่งJSFiddle ที่แสดงให้เห็นถึงแนวคิดนี้ที่นำไปใช้กับเค้าโครงที่ซับซ้อนมากขึ้น ฉันใช้ SCSS ที่นี่เนื่องจากตัวแปรอนุญาตให้ใช้โค้ดที่ยืดหยุ่นและอธิบายตัวเองได้ แต่เลย์เอาต์นั้นสามารถสร้างขึ้นใหม่ได้อย่างง่ายดายใน CSS บริสุทธิ์ถ้าไม่มีค่า "ฮาร์ดโค้ด" ไม่ใช่ปัญหา

นี่เป็นวิธีการแก้ปัญหาทั่วไปที่ได้รับคำสั่ง HTML ที่:

• คอลัมน์แรกในแหล่งที่มาคือของเหลว
• คอลัมน์ที่สองในลำดับของแหล่งที่มาได้รับการแก้ไข
  • คอลัมน์นี้สามารถลอยไปทางซ้ายหรือขวาโดยใช้ CSS

คอลัมน์คงที่ / สองทางด้านขวา

#wrapper {
  margin-right: 200px;
}
#content {
  float: left;
  width: 100%;
  background-color: powderblue;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: palevioletred;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

คอลัมน์คงที่ / สองทางด้านซ้าย

#wrapper {
  margin-left: 200px;
}
#content {
  float: right;
  width: 100%;
  background-color: powderblue;
}
#sidebar {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: palevioletred;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

วิธีการแก้ปัญหาคือการสลับการใช้งานจอแสดงผล: ตารางเซลล์ ; ซึ่งส่งผลให้มีคอลัมน์ความสูงเท่ากัน

เฮ้สิ่งที่คุณสามารถทำได้คือใช้ความกว้างคงที่กับทั้งคอนเทนเนอร์แล้วใช้คลาส div อื่นที่ชัดเจน: ทั้งสองอย่าง

div#left {

width: 600px;
float: left;
}

div#right {

width: 240px;
float: right;

}

div.clear {

clear:both;

}

วาง div ที่ชัดเจนใต้คอนเทนเนอร์ซ้ายและขวา

ฉันทำให้มันง่ายขึ้น: ฉันได้แก้ไขคำตอบของ jackjoe ความสูงอัตโนมัติ ฯลฯ ไม่จำเป็นฉันคิดว่า

CSS:

#container {
position: relative;
margin:0 auto;
width: 1000px;
background: #C63;
padding: 10px;
}

#leftCol {
background: #e8f6fe;
width: auto;
}

#rightCol {
float:right;
width:30%;
background: #aafed6;
}

.box {
position:relative;
clear:both;
background:#F39;
 }
</style>

HTML:

<div id="container">

  <div id="rightCol"> 
   <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
 </div>

 <div id="leftCol">

   <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

Lorem ipsum dolor amet amet, consectetuer adipiscing elit Phasellus varius eleifend Lorem ipsum dolor sit amet, consetetuer adipiscing elit.Phasellus varius eleifend

</div>

</div>

<div class="box">
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>