tigra1986
Создатель
- Регистрация
- 11 Авг 2013
- Сообщения
- 33
- Реакции
- 3
- Автор темы
- #1
Всем привет!
Есть адаптивные две колонки Для просмотра ссылки Войдиили Зарегистрируйся
Помогите пожалуйста сделать точно такие же три колонки.
Код под спойлером и по ссылке выше
Есть адаптивные две колонки Для просмотра ссылки Войди
Помогите пожалуйста сделать точно такие же три колонки.
Код под спойлером и по ссылке выше
HTML
<div class="container">
<h1>Текст в два столбца</h1>
<!-- НАЧАЛО -->
<!-- левая колонка -->
<div class="left-col">
<p>Равным образом дальнейшее развитие различных форм деятельности способствует подготовки и реализации направлений прогрессивного развития. С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение дальнейших направлений развития. Разнообразный и богатый опыт рамки и место обучения кадров в значительной степени обуславливает создание дальнейших направлений развития.</p>
</div>
<!-- правая колонка -->
<div class="right-col">
<p>Равным образом дальнейшее развитие различных форм деятельности способствует подготовки и реализации направлений прогрессивного развития. С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение дальнейших направлений развития. Разнообразный и богатый опыт рамки и место обучения кадров в значительной степени обуславливает создание дальнейших направлений развития.</p>
</div>
<!-- отмена float -->
<div class="clearfix"></div>
<!-- ОКОНЧАНИЕ -->
<h1>Текст в два столбца c картинками</h1>
<!-- НАЧАЛО -->
<!-- левая колонка -->
<div class="left-col">
<img src="Для просмотра ссылки Войдиили Зарегистрируйся" alt="..." class="img-responsive">
<p>Равным образом дальнейшее развитие различных форм деятельности способствует подготовки и реализации направлений прогрессивного развития. С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение дальнейших направлений развития. Разнообразный и богатый опыт рамки и место обучения кадров в значительной степени обуславливает создание дальнейших направлений развития.</p>
</div>
<!-- правая колонка -->
<div class="right-col">
<img src="Для просмотра ссылки Войдиили Зарегистрируйся" alt="..." class="img-responsive">
<p>Равным образом дальнейшее развитие различных форм деятельности способствует подготовки и реализации направлений прогрессивного развития. С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение дальнейших направлений развития. Разнообразный и богатый опыт рамки и место обучения кадров в значительной степени обуславливает создание дальнейших направлений развития.</p>
</div>
<!-- отмена float -->
<div class="clearfix"></div>
<!-- ОКОНЧАНИЕ -->
</div>
CSS
.container {
max-width: 640px;
margin: 0 auto;
padding: 20px;
}
/* Отсюда копируйте стили */
.left-col, /* левая колонка */
.right-col/* правая колонка */
{
width: 50%; /* ширина */
min-width: 180px; /* минимальная ширина сужения */
height: auto; /* высота */
box-sizing: border-box;
float: left; /* плавающие блоки */
}
.left-col{
padding-right: 10px; /* отступ справа */
}
.right-col{
padding-left: 10px; /* отступ слева */
}
/*Стили для адаптивных картинок*/
.img-responsive{
display: block;
max-width: 100%; /* ширина, размеры в процентах*/
height: auto;
margin: 20px 0px; /* отступы сверху и снизу */
background: #fff; /* для красоты цвет заполнения */
padding: 4px; /* для красоты внутренние отступы */
border: 1px solid #ddd; /* для красоты рамка серым цветом */
}
/*Cтили для маленьких мониторов*/
@media (max-width: 479px){
.left-col, /* левая колонка */
.right-col/* правая колонка */
{
width: 100%; /* ширина */
}
.right-col{
padding-left: 0px; /* отступ слева */
}
}
/* clearfix сбрасывает float*/
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
<div class="container">
<h1>Текст в два столбца</h1>
<!-- НАЧАЛО -->
<!-- левая колонка -->
<div class="left-col">
<p>Равным образом дальнейшее развитие различных форм деятельности способствует подготовки и реализации направлений прогрессивного развития. С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение дальнейших направлений развития. Разнообразный и богатый опыт рамки и место обучения кадров в значительной степени обуславливает создание дальнейших направлений развития.</p>
</div>
<!-- правая колонка -->
<div class="right-col">
<p>Равным образом дальнейшее развитие различных форм деятельности способствует подготовки и реализации направлений прогрессивного развития. С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение дальнейших направлений развития. Разнообразный и богатый опыт рамки и место обучения кадров в значительной степени обуславливает создание дальнейших направлений развития.</p>
</div>
<!-- отмена float -->
<div class="clearfix"></div>
<!-- ОКОНЧАНИЕ -->
<h1>Текст в два столбца c картинками</h1>
<!-- НАЧАЛО -->
<!-- левая колонка -->
<div class="left-col">
<img src="Для просмотра ссылки Войди
<p>Равным образом дальнейшее развитие различных форм деятельности способствует подготовки и реализации направлений прогрессивного развития. С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение дальнейших направлений развития. Разнообразный и богатый опыт рамки и место обучения кадров в значительной степени обуславливает создание дальнейших направлений развития.</p>
</div>
<!-- правая колонка -->
<div class="right-col">
<img src="Для просмотра ссылки Войди
<p>Равным образом дальнейшее развитие различных форм деятельности способствует подготовки и реализации направлений прогрессивного развития. С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение дальнейших направлений развития. Разнообразный и богатый опыт рамки и место обучения кадров в значительной степени обуславливает создание дальнейших направлений развития.</p>
</div>
<!-- отмена float -->
<div class="clearfix"></div>
<!-- ОКОНЧАНИЕ -->
</div>
CSS
.container {
max-width: 640px;
margin: 0 auto;
padding: 20px;
}
/* Отсюда копируйте стили */
.left-col, /* левая колонка */
.right-col/* правая колонка */
{
width: 50%; /* ширина */
min-width: 180px; /* минимальная ширина сужения */
height: auto; /* высота */
box-sizing: border-box;
float: left; /* плавающие блоки */
}
.left-col{
padding-right: 10px; /* отступ справа */
}
.right-col{
padding-left: 10px; /* отступ слева */
}
/*Стили для адаптивных картинок*/
.img-responsive{
display: block;
max-width: 100%; /* ширина, размеры в процентах*/
height: auto;
margin: 20px 0px; /* отступы сверху и снизу */
background: #fff; /* для красоты цвет заполнения */
padding: 4px; /* для красоты внутренние отступы */
border: 1px solid #ddd; /* для красоты рамка серым цветом */
}
/*Cтили для маленьких мониторов*/
@media (max-width: 479px){
.left-col, /* левая колонка */
.right-col/* правая колонка */
{
width: 100%; /* ширина */
}
.right-col{
padding-left: 0px; /* отступ слева */
}
}
/* clearfix сбрасывает float*/
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
, буду очень благодарен)