Как сделать главную состоящую из 3 колонок?

73

filrussia

20 января 2016, 13:38

749

Добрый день! Прошу помочь и рассказать, как сделать так, что бы на главной выводились новости сразу из трех рубрик, как на фото?

---------- Добавлено 20.01.2016 в 19:15 ----------

Пробовал делать с помощью div вот так:

CSS:

#glaw{

  border: 1px solid;

  display:inline;

  text-align:center;

  width:880px;

}

.blok1, .blok2, .blok3, .blok4{

  border-radius: 4px;

  box-shadow: rgba(0,0,0,1.2) 0px 1px 3px;

}

.blok1{

  margin:6px 3px 3px 3px;

  background: #F0FCE8;

  width:400px;

  height:150px;

  padding: 5px;

  text-align: center;

}

.blok2{

  margin:6px 3px 3px 3px;

  background: #F0FCE8;

  width:400px;

  height:150px;

  padding: 5px;

  text-align: center;

}

.blok3{

  margin:6px 3px 3px 3px;

  background: #F0FCE8;

  width:400px;

  height:150px;

  padding: 5px;

  text-align: center;

}

.blok4{

  float:left;

  margin-top:-495px;

  margin-left:420px;

  background: #F0FCE8;

  width:250px;

  height:480px;

  padding: 5px;

  text-align: center;

}

HTML:

 <div id="glaw">

    <div class="blok1">

      <h3>Добрый день!</h3>

        <img class="alignright size-full wp-image-533" 

src="http://starper55plys.ru/wp-content/uploads/2013/03/i-5.jpg" 

align="left" width="50" height="80" />

      <p>Всем привет! желаю творческих успехов!</p>

    </div>

    <div class="blok2">Блок 2</div>

    <div class="blok3">Блок 3</div>

    <div class="blok4">Блок 4</div>

  </div>

Должно было получится вот так:

Но у меня все блоки почему-то находятся друг после друга. В чем может быть ошибка?

http://show63.ru (http://show63.ru) - самара: аренда звука и света, сцена, светодиодного экрана. Аренда стульев, столов в Самаре и в Самарской области.

LH

89

Leonid H

20 января 2016, 16:27

#1

<style>

.grid:after {

content: " ";

display: table;

clear: both;

}

[class*='col-'] {

float: left;

}

*, *:after, *:before {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.col-1 {width: 8.33333333%;}

.col-2 {width: 16.66666667%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33333333%;}

.col-5 {width: 41.66666667%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33333333%;}

.col-8 {width: 66.66666667%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33333333%;}

.col-11 {width: 91.66666667%;}

.col-12 {width: 100%;}

.block_one {background-color: red;}

.block_two {background-color: blue;}

.block_three {background-color: green;}

</style>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

F

73

filrussia

20 января 2016, 17:01

#2

Не выходит((( Вот что получается:

LH

89

Leonid H

20 января 2016, 17:07

#3

У вас все идет сплошняком - стили не подключены.

Проверьте имя и путь до стилевого файла.

<head>

</head>

F

73

filrussia

20 января 2016, 17:16

#4

Стили подключены, но почему-то все равно не работает

WF

6

webFil

20 января 2016, 18:49

#5

стили не работают потому что вы влепили их просто в конец файла , а там не закрытая скобка для @media ( max-width: 400px ). вот стиль и работает только если ширина экрана меньше 400px

Лендинги всего за 4500р (/ru/forum/923704)

F

73

filrussia

20 января 2016, 20:06

#6

Спасибо огромное всем, кто откликнулся. Действительно проблема была в скобке, сейчас все работает

---------- Добавлено 21.01.2016 в 00:13 ----------

Еще один вопросик: а как сделать отступ между блоками?

И для чего в стилях нужны вот эти параметры:

.col-1 {width: 8.33333333%;}

.col-2 {width: 16.66666667%;}

.col-4 {width: 33.33333333%;}

.col-5 {width: 41.66666667%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33333333%;}

.col-8 {width: 66.66666667%;}

.col-10 {width: 83.33333333%;}

.col-11 {width: 91.66666667%;}

.col-12 {width: 100%;}

WF

6

webFil

20 января 2016, 20:51

#7

filrussia:
И для чего в стилях нужны вот эти параметры

у вас макет изпользует 12-колоночную систему.

из верстки что выше видно что

при создание блока вы указываете какую часть всей области он будет занимать.

если .col-12(100%) занимает всю ширину страницы то .col-6(50%) - половину.

в вашем примере вы прописали .col-9( И .col-3 (в суме 12, тоесть эти 2 блока займут всю ширину основного контента)

эти процентные соотношения от всей ширины рабочего пространиства и указаны в

.col-1 {width: 8.33333333%;}

.col-2 {width: 16.66666667%;}

...

F

73

filrussia

20 января 2016, 20:53

#8

webFil:
у вас макет изпользует 12-колоночную систему.
из верстки что выше видно что
при создание блока вы указываете какую часть всей области он будет занимать.
если .col-12(100%) занимает всю ширину страницы то .col-6(50%) - половину.
в вашем примере вы прописали .col-9( И .col-3 (в суме 12, тоесть эти 2 блока займут всю ширину основного контента)

Спасибо за разъяснения

Как удалить плохие SEO-ссылки и очистить ссылочную массу сайта

Яндекс Вебмастер вынес товарные фиды в отдельный раздел