Выровнять блоки по ширине

@Dmitri446 · Регистрация: 15.01.2014

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

Есть 3 блока section которые располагаются друг за другом с помощью

Code
1
float:left

. Как сделать, или как рассчитать чтобы эти три блока занимали всю доступную ширину страницы(чтобы один блок не сползал вниз)и было ровное расстояние от окна браузера до левого блока и расстояние от правого блока до окна браузера соответственно было одинаковым?

Code
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<style>
    section{
        float:left;
        background:green;
        width:30%;
        margin:0 1.5% ;
        text-align:center;
        padding-bottom:10px;
    }
</style>
</head>
<body>
 
<section>SECTION</section>
<section>SECTION</section>
<section>SECTION</section>
 
 
</body>
</html>

@evgeniyd · 07.08.2016, 18:16

А, если написать?

CSS
1
width:30.33%;

@Dmitri446 · 07.08.2016, 18:34 **[ТС]**

как по мне всёравно чутка не ровно выходит, может есть какой-то способ кроме как подсчитывания всей ширины?

Добавлено через 7 минут
кстати какая будет общая ширина если добавить ещё
в

Code
1
section

Code
1
padding-left:3% padding-right 3%

?
Я насчитал 117%, значит если я уменьшу

Code
1
width

на 17% то по идее должно всё ровно встать, но нет, справа появляется большой отступ. Может я неправильно считаю?

@Fedor92 · 07.08.2016, 18:35

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

как по мне всёравно чутка не ровно выходит, может есть какой-то способ кроме как подсчитывания всей ширины?

Как вариант:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <title>example</title>
    <meta charset="utf-8">
    <style>
        html, body{width:100%; height:100%; margin:0}
        .table{display:table; width:100%; border:1px solid red; height:40px; border-collapse:separate; border-collapse: separate; border-spacing: 15px 10px;}
        .table-cell{display:table-cell; width:30%; background:green}
    </style>
</head>
<body>
    <div class="table">
        <section class="table-cell"></section>
        <section class="table-cell"></section>
        <section class="table-cell"></section>
    </div>
</body>
</html>

@Dmitri446 · 07.08.2016, 18:44 **[ТС]**

как в таком случае подсчитывается ширина?

@Fedor92 · 07.08.2016, 18:51

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

как в таком случае подсчитывается ширина?

В каком смысле подсчитывается?

30% от ширины родительского блока - отступы(60px)... К примеру ширина родительского блока 1920px, тогда ширина одной секции: (1920px-60px)/3=620px

@Dmitri446 · 07.08.2016, 19:05 **[ТС]**

в вашем коде вроде не указаны отступы, заранее извиняюсь что может глупые вопросы задаю, просто сегодня весь день вожусь с этой темой. Пытаюсь сделать по примеру с этого сайта, в этом примере всё отлично, вот css этого примера:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
code {
  background: #2db34a;
  border-radius: 6px;
  color: #fff;
  display: block;
  font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
  padding: 24px 15px;
  text-align: center;
}
header,
section,
aside,
footer {
  margin: 0 1.5% 24px 1.5%;
}
section {
  float: left;
  width: 30%;
}
footer {
  clear: both;
  margin-bottom: 0;
}

Не понятно что за элемент code и почему эти свойства прописаны в нём а не в том же section

@Fedor92 · 07.08.2016, 19:17

Dmitri446, в примере на сайте отступы посчитаны неверно(поскольку пример корюзлый)...

А в моём примере отступы между ячейками задаёт свойство: border-spacing и элементы из потока не выпадают...

@Dmitri446 · 07.08.2016, 19:29 **[ТС]**

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

Dmitri446, в примере на сайте отступы посчитаны неверно(

как же так получается что всё работает если неправильно посчитаны отступы?

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

А в моём примере отступы между ячейками задаёт свойство: border-spacing и элементы из потока не выпадают

т.е если использовать

CSS
1
display:table;

какие отступы не лепи они всёравно будут одинаковы с каждой стороны?

@Fedor92 · 07.08.2016, 19:34

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

как же так получается что всё работает если неправильно посчитаны отступы?

А что работает?

У них сумма ширины всех section+отступы = 99% ширины родителя... А Вы этого не видите, потому-что статья рассчитана на новичков... А вот, если присмотритесь, то первая секция прилегает к левому краю, а вот справа нет, потому-что там образовался 1% свободной ширины...

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

какие отступы не лепи они всё равно будут одинаковы с каждой стороны?

Я же уже сделал Вам пример...

Отступы одинаковые на 100%...

@Dmitri446 · 07.08.2016, 19:39 **[ТС]**

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

У них сумма ширины всех section+отступы = 99% ширины родителя... А Вы этого не видите,

как раз на это я сразу и обратил внимание

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

А вот, если присмотритесь, то первая секция прилегает к левому краю, а вот справа нет

А вот здесь проглядел, действительно чутка к левой прилегает. Как в такой ситуации можно этот 1% наверстать?

@Fedor92 · 07.08.2016, 20:02

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

Как в такой ситуации можно этот 1% наверстать?

Изменить размер отступа:

CSS
1
margin: 0 1.66% 24px 1.66%;

@Dmitri446 · 07.08.2016, 20:11 **[ТС]**

спасибо!

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	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, то после закрытия окошка. . .

@Dmitri446 0 / 0 / 0 Регистрация: 15.01.2014 Сообщений: 65
	07.08.2016, 18:44 [ТС]
	как в таком случае подсчитывается ширина? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	07.08.2016, 19:17
	Dmitri446, в примере на сайте отступы посчитаны неверно(поскольку пример корюзлый)... А в моём примере отступы между ячейками задаёт свойство: border-spacing и элементы из потока не выпадают... 0

@Dmitri446 0 / 0 / 0 Регистрация: 15.01.2014 Сообщений: 65
	07.08.2016, 20:11 [ТС]
	спасибо! 0

Выровнять блоки по ширине

Решение