Верстка трех колонок с выравниванием по ширине

Светлана Г. · November 23, 2014

Здравствуйте!

Есть такой блок:

Сверстать нужно адаптивно. Данный вид для ширины 1340px.

Обращаю внимание на то, что заголовок выровнен со средней колонкой по левому краю. На крайний случай, для выравнивания заголовка буду использовать это:

#title:before{	content:'Наши услуги:';	display:inline-block;	font-size:30px;}

Я использую стили Bootstrap. Может быть, здесь подойдет что-то вроде .col-lg-offset-* . Я не очень с этим разобралась, поэтому не знаю, как это правильно применить - сколько выбрать колонок, например.

Пробовала использовать flex, но он не кроссбраузерный.

Помогите, пожалуйста.

Edited November 23, 2014 by Светлана Г.

kattiperk · November 23, 2014

Flex был кроссбаузерный.

А как адаптировать? Чтобы расстояние было резиновым?

Как это сделать в бутстрапе, так это задать контейнеру class="container-fluid"

Edited November 23, 2014 by kattiperk

Светлана Г. · November 23, 2014

Flex был кроссбаузерный.
А как адаптировать? Чтобы расстояние было резиновым?
Как это сделать в бутстрапе, так это задать контейнеру class="container-fluid"

Ну чтобы структура сохранялась. Мне надо кроссбраузерно везде. А причем здесь class="container-fluid" ? Он чем может помочь?

kattiperk · November 23, 2014

Структура сохранится, колонки станут резиновыми.

Светлана Г. · November 23, 2014

Структура сохранится, колонки станут резиновыми.

А можете структуру набросать? Резиновые колонки - это не проблема. Проблема разместить их так, как в макете.

kattiperk · November 23, 2014

<!DOCTYPE html>

<head>

</head>

<body>

<p>

Хирургия

</p>

<p>

Хирургия

</p>

<p>

Хирургия

</p>

<p>

Хирургия

</p>

</div>

<p>

Хирургия

</p>

<p>

Хирургия

</p>

<p>

Хирургия

</p>

<p>

Хирургия

</p>

</div>

<p>

Хирургия

</p>

<p>

Хирургия

</p>

<p>

Хирургия

</p>

<p>

Хирургия

</p>

</div>

</footer>

</body>

</html>

nonlux · November 23, 2014

Думаю так точнее будет с учетом заголовка:

.container-fluid

.row

.col-lg-4

.col-lg-4 (тут - Наши Услуги)

.col-lg-4

.row ( тут колонки навигации)

.col-lg-4

Светлана Г. · November 23, 2014

Принципиально использовать .container-fluid? У меня используется .container.

Светлана Г. · November 23, 2014

Вот что получилось:

<div class="container">    <article class="no_padding clearfix" id="services">    <div class="row">    <div class="col-lg-4 col-sm-4 col-xs-4"></div>    	<div class="col-lg-4 col-sm-4 col-xs-4"><h1>Наши услуги:</h1></div>    <div class="col-lg-4 col-sm-4 col-xs-4"></div>    </div>    <div class="row service_col">        <div class="col-lg-4 col-sm-4 col-xs-4">    <ul class="no_mark c_5e2009 my-flex-block">        <li><a href="#">Хирургия</a></li>        <li><a href="#">Терапия</a></li>        <li><a href="#">Ортопедия</a></li>        <li><a href="#">Парадонтология</a></li>    </ul>    </div>        <div class="col-lg-4 col-sm-4 col-xs-4">    <ul class="no_mark c_5e2009">        <li><a href="#">Бюгельный протез</a></li>        <li><a href="#">Нейлоновый протез</a></li>        <li><a href="#">Имплантология</a></li>        <li><a href="#">Ортодонтия</a></li>        <li><a href="#">Художественная реставрация</a></li>    </ul>    </div>        <div class="col-lg-4 col-sm-4 col-xs-4">    <ul class="no_mark c_5e2009">        <li><a href="#">Гигиена и профилактика</a></li>        <li><a href="#">Люминиры</a></li>        <li><a href="#">Украшение для зубов</a></li>        <li><a href="#">Отбеливание зубов</a></li>    </ul>    </div>        </div><!--/.row-->

Текст в правой колонке должен быть прижат к правому краю. Может тут уже использовать -offset ?

Edited November 23, 2014 by Светлана Г.

kattiperk · November 23, 2014

text-align: right;

и потом padding-right в процентах симметрично как и с левого края.

Светлана Г. · November 23, 2014

text-align: right;

не подходит. По макету видно, что текст выровнен влево.

text-align: right;
не подходит. По макету видно, что текст выровнен влево.

kattiperk · November 23, 2014

Тогда

<div class="col-lg-3 col-sm-3 col-xs-3"></div><div class="col-lg-1 col-sm-1 col-xs-1">    <p>        Хирургия    </p>    <p>        Хирургия    </p>    <p>        Хирургия    </p>    <p>        Хирургия    </p></div>

Или оставить начальный вариант, но сделать padding-left: *%;

Светлана Г. · November 24, 2014

Больше нет никаких решений?

nonlux · November 24, 2014

Посмотрите какие свойства у h1

Он случайно не центрует?

Какие значения:

- text-align

- margin

conteiner-fluid в вашем случае обязателен.

Вы документацию читали? Если да то подумайте сами чем отличается container и container-fluid. Можете ваше мнение высказать, поправлю.

Далее... вы хотите сделать респонсив:

объясните мне вот это col-xs-4.

Вы побывали ваше решение посмотреть в xs разрешении ?

Посмотрите какие свойства у h1 Он случайно не центрует? Какие значения: - text-align - margin

Ой я не о вашем вопросе ),

Попробуйте для ul в правой колонке добавить класс pull-right

Sign In

Верстка трех колонок с выравниванием по ширине

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information