2 layout kolom div: kolom kanan dengan lebar tetap, cairan kiri

Persyaratan saya sederhana: 2 kolom di mana yang benar memiliki ukuran tetap . Sayangnya saya tidak dapat menemukan solusi yang berfungsi, baik di stackoverflow maupun di Google. Setiap solusi yang dijelaskan di sana gagal jika saya menerapkannya dalam konteks saya sendiri. Solusi saat ini adalah:

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>

Saya mendapatkan yang berikut dengan kode di atas:

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

Mohon saran. Terimakasih banyak!

Hapus float di kolom kiri.

Pada kode HTML, kolom kanan harus ada sebelum yang kiri.

Jika kanan memiliki float (dan lebar), dan jika kolom kiri tidak memiliki lebar dan tidak ada float, itu akan fleksibel :)

Juga menerapkan overflow: hidden dan beberapa ketinggian (bisa otomatis) ke div luar, sehingga mengelilingi kedua div bagian dalam.

Terakhir, di kolom kiri, tambahkan a width: autodanoverflow: hidden , ini membuat kolom kiri tidak tergantung dari yang kanan (misalnya, jika Anda mengubah ukuran jendela browser, dan kolom kanan menyentuh yang kiri, tanpa properti ini, kolom kiri akan berjalan di sekitar yang benar, dengan properti ini tetap di ruangnya).

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

Contoh di sini: http://jsfiddle.net/jackJoe/fxWg7/

Lihat http://www.alistapart.com/articles/negativemargins/ , inilah yang Anda butuhkan ( contoh 4 di sana).

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

Yang terbaik untuk menghindari menempatkan kolom kanan sebelum kiri, cukup gunakan margin kanan negatif.

Dan menjadi "responsif" dengan memasukkan pengaturan @media sehingga kolom kanan jatuh di bawah kiri pada layar sempit.

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

Solusi termudah dan paling fleksibel sejauh ini untuk digunakan table display:

HTML, div kiri datang pertama, div kanan datang kedua ... kita membaca dan menulis dari kiri ke kanan, sehingga tidak masuk akal untuk menempatkan divs kanan ke kiri

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

Contoh kasus:

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

Saya ingin menyarankan solusi yang belum disebutkan: gunakan CSS3 calc()untuk mencampur %dan pxunit. calc()memiliki dukungan yang sangat baik saat ini, dan memungkinkan untuk konstruksi tata letak yang cukup kompleks.

Berikut ini tautan JSFiddle untuk kode di bawah ini.

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

Dan inilah JSFiddle lain yang menunjukkan konsep ini diterapkan pada tata letak yang lebih kompleks. Saya menggunakan SCSS di sini karena variabelnya memungkinkan untuk kode yang fleksibel dan self-deskriptif, tetapi tata letak dapat dengan mudah dibuat kembali dalam CSS murni jika memiliki nilai "hard-coded" bukan masalah.

Ini adalah solusi berurutan sumber HTML generik di mana:

• Kolom pertama dalam urutan sumber adalah fluida
• Kolom kedua dalam urutan sumber diperbaiki
  • Kolom ini dapat melayang ke kiri atau kanan menggunakan CSS

Memperbaiki / Kolom Kedua di Kanan

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

Memperbaiki / Kolom Kedua di Kiri

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

Solusi alternatif adalah dengan menggunakan display: table-cell ; yang menghasilkan kolom tinggi yang sama.

Hai, Apa yang bisa Anda lakukan adalah menerapkan lebar tetap ke kedua wadah dan kemudian menggunakan kelas div lain di mana jelas: keduanya, suka

div#left {

width: 600px;
float: left;
}

div#right {

width: 240px;
float: right;

}

div.clear {

clear:both;

}

letakkan div yang jelas di bawah wadah kiri dan kanan.

Saya telah menyederhanakannya: Saya telah mengedit jawaban jackjoe. Tinggi otomatis dll tidak diperlukan saya pikir.

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 sit amet, consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer 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>