使用CSS自动拉伸列宽

Question

I think similar question must have been asked already, but I don't know how to find it...

I want to create a multi-column HTML layout with autostretching columns. Let's say 2 columns. When there's only one column on a page it fills 100% of container width, when I add a second column of 25% the first one automatically squeeze to 75%.

<div class="wrapper">
    <div class="content">...</div>
    <div class="sidebar">...</div>
</div>

I'm sure this can be done with JavaScript (checking if second column exists), but what about plain CSS? Is it actually possible? I need to support IE 9+.

Answer 1

You need something like following. Use display:table to parent and display:table-cell to child element.

 .wrapper{ display:table; width: 100%; } .content{ display:table-cell; background-color:yellow; } .sidebar{ display:table-cell; width:25%; background-color:blue; } 

 <div class="wrapper"> <div class="content">...</div> <div class="sidebar">...</div> </div> 

Hope it helps.

Answer 2

This can be done with css selectors:

  .content{
    width:100%;
  }
  .sidebar{
    width:25%;
  }
  .content:not(:only-child){
    width:75%;
  }

Pen: http://codepen.io/vandervals/pen/zGqorj

I think this is far more elegant than the table solution and the support is really wide: http://caniuse.com/#search=only-child

Answer 3

I know you ask for a CSS solution, but here is a simple jQuery script to have a dynamic sizing (no matter the number of column, it will be divided and fit in the row).

 $(document).ready(function() { $('.row').each(function(k, v) { var col = $('.column', this), colNumber = col.length, percent = 100 / colNumber; console.log(percent); col.css({'width' : percent + '%'}); }); }); 

 * { box-sizing: border-box; } .wrapper { width: 960px; margin: 0 auto; } .column { float: left; height: 200px; margin: 0 auto; border: 1px solid black; background-color: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="row"> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column"></div> </div> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> </div>