выравнивание 3 <div>контейнеров?

Question

У меня есть три <div> контейнера, и я хочу выровнять их по одному на левой стороне экрана, одному в середине и одному справаС равным пространством между контейнерами.

Как я могу это сделать?

Answer 1

Система 960 Grid System обладает хорошей надежной, но гибкой системой для генерации колонн - стационарных или жидкостных. Это действительно поощряет модульный подход к вашему стилю, который является моим личным предпочтением. Я обычно не использую то, что он генерирует из коробки, хотя я изменяю это, чтобы удовлетворить.

http://960.gs/

Вот пример с тремя столбцами:

http://www.spry -soft.com / сетки / сетки /? Column_width = 300 & column_amount = 3 & gutter_width = 20

Конечно, есть много отличных альтернатив, таких как Yahoo Grid Builder:

http://developer.yahoo.com/yui/grids/builder/

Answer 2

Есть несколько способов сделать это, с плавающей точкой или с разметкой таблицы. Между сторонниками таблицы и сторонниками поплавка есть какая-то священная война. Я слегка склоняюсь к раскладке стола, но у обоих есть свои достоинства. Я отвечу за табличную сторону:

<table style="table-layout:fixed;width:100%">
  <colgroup><col style="width:33%"/><col style="width:33%"/><col style="width:33%"/></colgroup>
  <tr>
    <td style="vertical-align:top">        
      <div style="border:1px solid red">
        column one with some long text that should wrap but still keep the column at 33%
      </div>
    </td>
    <td style="vertical-align:top">
      <div style="border:1px solid green">
        column two
      </div>
    </td>
    <td style="vertical-align:top">
      <div style="border:1px solid blue">
        column three
      </div>
    </td>
  </tr>
</table>

Вот пример: http://jsbin.com/axojo