Сделать боковые отступы для центральной колонки

@Aqua77 · Регистрация: 13.07.2015

Студворк — интернет-сервис помощи студентам

Как сделать чтобы данные колонки оставались равномерно резиновыми но, чтобы у центральной были отступы по бокам 20px? Главное не менять последовательность html кода

HTML5
1
2
3
4
5
6
7
8
9
 <body>
 <div class="osn">
<div>
<p class="cente"></p>
<p class="lef"></p>
</div>
<p class="righ"></p>
</div>
 </body>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
*{
    box-sizing:border-box;
    margin:0;
}
.osn{
    overflow:hidden;
}
.osn div{
    width:75%;
    float:left; 
}
.cente{
    float:right;
    width:66.8%;
    height:300px;
    background:black;
    margin:0 20px;
}
.lef{
    width:33.2%;
    height:300px;
    float:left;
        background:red;
}
.righ{
    float:right;
    width:25%;
    height:300px;
    background:blue;
}

Было бы свойство включающее значение отступов в ширину

@Kenworth · 11.10.2016, 12:24

Такая размерка для верстри не куда не годится. Вот посмотри пример

@Aqua77 · 11.10.2016, 17:22 **[ТС]**

Решил сделать так

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
*{
    box-sizing:border-box;
}
.osn{
    overflow:hidden;
    background-image: linear-gradient(to left, red 0%, red 25%, white 25%, white 75%, blue 75%, blue 100%);
    border:1px black solid;
}
.osn{
    overflow:hidden;
}
.osn div{
    width:70.5%;
    float:left; 
}
.cente{
    float:right;
    width:59%;
    text-align:justify;
}
.lef{
    width:34%;
 
        padding:0 10px;
}
.righ{
    float:right;
    width:25%;
    padding:0 10px;
}

Добавлено через 2 часа 57 минут

Сообщение от Kenworth

Такая размерка для верстри не куда не годится

Почему же? Я, выделил первые 2 блока в отдельный див для того чтобы основная информация была в html первой - для отображения в поисковиках.

@Kenworth · 11.10.2016, 17:38

Ну ок, выделил, а дальше??? Каким образом в тег будешь вставлять еще элементы????

@Aqua77 · 11.10.2016, 17:43 **[ТС]**

Сообщение от Kenworth

вставлять еще элементы

Обычно) У каждого есть своя ширина, всё что вставлю поместится в этот элемент

Добавлено через 1 минуту
Вот пример с текстом

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 <body>
 <h1>Большая книга CSS</h1>
 <div class="osn">
<div>
<p class="cente">222ghhg jhgj hgj gj hgj gjhghj ghjg jhg jhhjgjgjhgj Избранная статья
Angelus Novus. 1920.
«О понятии истории», или «Тезисы о философии истории» (1940), — неоконченная работа Вальтера Беньямина (1892—1940), состоящая из двух десятков фрагментов. «Тезисы» не предназначались для публикации, однако сегодня рассматриваются как одна из главных работ Беньямина, которая оказала влияние на философию истории, критическую теорию и политическую философию второй половины XX века.
 
«Тезисы» были написаны во Франции в начале 1940 года под впечатлением от советско-германского пакта о ненападении в условиях гитлеровской военной агрессии и ощущения неизбежности мировой катастрофы. Беньямин подверг яростной критике германский фашизм, социал-демократию и сталинский коммунизм; идеи прогресса и закономерного движения истории к конечной цели, присущие как «буржуазной» мысли, так и «историческому материализму»; позитивистские представления об объективном историческом познании («историзм»), преемственности культуры и однородности исторического времени. Интерпретацию работы затрудняют образно-поэтический и фрагментарный стиль автора, множество цитат и интертекстуальных, часто скрытых отсылок. В риторике текста сочетаются мессианские мотивы избавления (иудаизм) и революционное разрушение (анархизм).
 
(Далее…)
Другие избранные статьи (940) | Кандидаты | Статьи года (16) | Просмотр
Хорошая статья
Сергей Лукьяненко
«Осенние визиты» — роман российского писателя-фантаста Сергея Лукьяненко, рассказывающий о реальном мире, направление развития которого определяется приходящими Визитёрами. Роман был написан в 1995—1996 годах и впервые опубликован издательством «АСТ» в 1997 году. Впоследствии неоднократно переиздавался.
 
Действие романа происходит в современной на момент написания Москве и ряде других городов. К шестерым разным людям приходят Визитёры, их двойники, представляющие разные стороны жизни человечества. Они вынуждены бороться за право вести человечество по своему пути. К борьбе присоединяется также и Тьма. Визитёры нападают друг на друга, скрываются, образуют альянсы для достижения своих целей. В итоге остаётся только посланник Развития, но и его, вероятно, убивают.
 
В 1998 году роман был отмечен премией «Сигма-Ф», призом читательских симпатий журнала «Если», в номинации «Крупная форма, романы».</p>
<p class="lef">111ghhg jhgj hgj gj hgj gjhghj ghjg jhg jhhjgjgjhgj Избранная статья Angelus Novus. 1920. «О понятии истории», или «Тезисы о философии истории» (1940), — неоконченная работа Вальтера Беньямина (1892—1940), состоящая из двух десятков фрагментов. «Тезисы» не предназначались для публикации, однако сегодня рассматриваются как одна из главных работ Беньямина, которая оказала влияние на философию истории, критическую теорию и политическую философию второй половины XX века. «Тезисы» были написаны во Франции в начале 1940 года под впечатлением от советско-германского пакта о ненападении в условиях гитлеровско</p>
</div>
<p class="righ">333Просмотр Хорошая статья Сергей Лукьяненко «Осенние визиты» — роман российского писателя-фантаста Сергея Лукьяненко, рассказывающий о реальном мире, направление развития которого определяется приходящими Визитёрами. Роман был написан в 1995—1996 годах и впервые опубликован издательством «АСТ» в 1997 году. Впоследствии неоднократно переиздавался. Действие романа происходит в современной на момент написания Москве и ряде других городов. К шестерым разным людям приходят Визитёры, их двойники, представляющие разные стороны жизни человечества. Они вынуждены бороться за право вести человечество по своему пути. К борьбе присоединяется также и Тьма. Визитёры нападают друг на друга, скрываются, образуют альянсы для достижения своих целей. В итоге остаётся только посланник Развития, но и его, вероятно, убивают. В 1998 году роман был отмечен премией «Сигма-Ф», призом читательских симпатий журнала «Если», в номинации «Крупная форма, романы».</p>
</div>
 </body>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
*{
    box-sizing:border-box;
    padding-top:0;
    margin:0;
}
.osn{
    overflow:hidden;
    background-image: linear-gradient(to left, #93C1E9 0%, #93C1E9 20%, white 20%, white 80%, #93C1E9 80%, #93C1E9 100%);   
    padding:0;
}
.osn{
    overflow:hidden;
}
.osn div{
    width:80%;
    float:left; 
}
.cente{
    float:right;
    width:75%;
    padding:0 20px;
    text-align:justify;
    border:1px black solid;
    border-top:none;
    border-bottom:none; 
}
.lef{
    width:25%;
        padding:0 10px;
}
.righ{
    float:right;
    width:20%;
    padding:0 10px;
}
h1{
margin:0;
    background-image: -webkit-linear-gradient(right, rgb(93,43,78), rgb(8,2,50));   
    font-size: 3em; 
    color: white;
    font-weight: bold;
    padding-top: 30px;
    padding-bottom: 30px;
    clear: both;
    padding-left: 10px;
    font-family:arial;
}

@Kenworth · 11.10.2016, 22:11

Ну ок, валидатор показал зеленый свет. Мне хочется все же посмотреть каким образом в тег Вы будете вставлять интерактивные элементы (если они предусмотрены: div, form, label ... )
К стати, по хорошему каждый абзац должен содержаться в теге , а не так как у Вас все одним текстом. И вот еще, если - блочный элемент - то это не означает, что в него можно пихать все что угодно.

@mrtoxas · 11.10.2016, 22:49

Не валидатором единым. Есть еще поисковые системы, которые знают, что это параграф.

Пара́граф — мелкое подразделение текста внутри главы, раздела.

Если есть желание ввести в заблуждение поисковых роботов и понизить поисковую выдачу, тогда можете делать все, что угодно, хоть всю страницу в тэг параграфа заворачивать.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Kenworth 105 / 104 / 59 Регистрация: 21.10.2013 Сообщений: 346
	11.10.2016, 12:24
	Такая размерка для верстри не куда не годится. Вот посмотри пример 0

@Kenworth 105 / 104 / 59 Регистрация: 21.10.2013 Сообщений: 346
	11.10.2016, 17:38
	Ну ок, выделил, а дальше??? Каким образом в тег <p> будешь вставлять еще элементы???? 0

@Kenworth 105 / 104 / 59 Регистрация: 21.10.2013 Сообщений: 346
	11.10.2016, 22:11
	Ну ок, валидатор показал зеленый свет. Мне хочется все же посмотреть каким образом в тег <p> Вы будете вставлять интерактивные элементы (если они предусмотрены: div, form, label ... ) К стати, по хорошему каждый абзац должен содержаться в теге <p></p>, а не так как у Вас все одним текстом. И вот еще, если <p> - блочный элемент - то это не означает, что в него можно пихать все что угодно. 0