Чистый CSS3 3-столбцовый макет, с чего начать?

Ответ 1

ваш css должен выглядеть следующим образом:

.ltcol, .ctcol { float:left; }
.rtcol { float:right; }

Целью свойства float CSS является, вообще говоря, толкание элемента уровня блока влево или вправо, выведение его из потока по отношению к другим элементам блока. Это позволяет естественному потоку обтекать плавающий элемент. Эта концепция похожа на то, что вы видите каждый день в печатной литературе, где фотографии и другие графические элементы выровнены с одной стороны, в то время как другой контент (обычно текст) естественно вытекает вокруг элемента слева или справа.

Для получения дополнительной информации вы должны прочитать эту интересную статью .

См. этот демонстрационный пример: http://jsfiddle.net/akhurshid/YRWLV/

Ответ 2

Ваш HTML очень чистый - это отличный шаг вперед.

Вам нужно добавить float: left ко всем столбцам. Чтобы гарантировать, что поплавок будет отменен после ваших столбцов, лучше добавить div clear после плавающих столбцов.

HTML:

<div class="colwrapper">
    <div class="ltcol">Column 1</div>
    <div class="ctcol">Column 2</div>
    <div class="rtcol">Column 3</div>
    <div class="clear"></div>
</div>​​​​​​​​​​​​​​​​​

CSS

.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; background-color: #efefef }
.ltcol { float:left; }
.ctcol { float:left; }
.rtcol { float:left; }
.clear { clear: left; }

Ответ 3

Итак, вы добавляете тег css3 для этого квеста, поэтому я предлагаю вам сделать это с помощью раскладки столбца css3:

Дополнительная информация

например

HTML

<div class="colwrapper">
    <div>text</div>
</div>

CSS

.colwrapper div
{
  -moz-column-count:3; /* Firefox */
  -webkit-column-count:3; /* Safari and Chrome */
  column-count:3;
} 

Это не работает на IE.

Ответ 4

Используйте одну из этих проверенных и проверенных реализаций вместо того, чтобы запускать свои собственные. В дополнение к тому, что вы получите тестовый и рабочий код, вы добавите отзывчивость к своему сайту с почти нулевым усилием.

• http://cssgrid.net/
• http://960.gs/
• http://framelessgrid.com/
• http://goldengridsystem.com/

и многое другое, если вы google..

Ответ 5

также может использовать свойство Flexbox для этого теперь, так что вам не нужно беспокоиться о поплавках или clearfix.

  main{
  /* .colwrapper{ */
    display: flex;
    flex-flow: row;
    justify-content: center;
  }
  main > section{
  /* .ltcol,.ctcol,.rtcol{ */
    display:flex;
    flex-flow:column;
    align-items:center;
    padding:10px; padding:.625rem;
  }

  main > section:nth-child(2){
  /* .ctcol{ */
    margin:0 20px; margin:0 1.25rem;
  }

http://caniuse.com/flexbox показывает, что поддержка этого не так далеко, как вам бы хотелось, однако есть способы улучшить поддержка путем смешивания старых версий синтаксиса с новым http://css-tricks.com/using-flexbox/ имеет отличную запись на нем от Криса Койера, если вы хотите играть с этим для следующего проекта (этот пост довольно старый). Вы также можете получить более подробную информацию по адресу http://html5please.com/#flexbox

Кроме того, если вы используете HTML5, я бы, вероятно, пошел с разделами над div для более семантической структуры, поэтому сравнение выглядело бы примерно так:

<main>
  <section></section><!-- or <nav></nav> -->
  <section></section><!-- or <article></article> -->
  <section></section><!-- or <aside></aside> -->
</main>

instead of...

<div class="colwrapper">
  <div class="ltcol"></div>
  <div class="ctcol"></div>
  <div class="rtcol"></div>
</div>

Ответ 6

Просто попробуйте поставить rtcol div beofre le ltcol div.

  <div class="colwrapper">
    <div class="rtcol">X</div>
    <div class="ltcol">X</div>
    <div class="ctcol">X</div>
  </div>​

http://jsfiddle.net/EDjpy/