Ширина блока DIV по условию от ширины страницы

@barsuuuk · Регистрация: 04.03.2018

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

прошу помощи!

в JS ничего не понимаю, но без его применения варианта не вижу.
имею следующее:

HTML5
1
2
3
4
5
6
7
8
9
<div class="vneshniy_blok">
        <div class="vnutrenniy_blok">
            <div class="blok">1</div>
            <div class="blok">2</div>
            <div class="blok">3</div>
                         ......
                        <div class="blok">100</div>
        </div>
</div>

блоки blok имеют ширину 150px и выравниваются по float:left.
Блок vnutrenniy_blok по ширине растягивается автоматом на весь экран по ширине "vneshniy_blok",
а мне надо чтобы он был по ширине блоков block умещающихся в строке.

как задать ширину для блока vnutrenniy_blok в зависимости от ширины экрана, относительно кратного размера 150 px, но с прибавлением к ширине до 10px.

поясню:

если ширина экрана 450px, то ширина блока vnutrenniy_blok 450px,
если ширина экрана 480px, то ширина блока vnutrenniy_blok 460px,
если ширина экрана 330px, то ширина блока vnutrenniy_blok 310px,
если ширина экрана 440px, то ширина блока vnutrenniy_blok 310px,
если ширина экрана 458px, то ширина блока vnutrenniy_blok 458px,
если ширина экрана 309px, то ширина блока vnutrenniy_blok 309px,

вроде суть изложил, надеюсь понятно,
прошу помочь с кодом, т.к. с JS дело не имел, но срочно нужно реализовать идею.

Спасибо!

@Wlk · 04.03.2018, 18:21

Как-то так:

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="vneshniy_blok">
  <div class="vnutrenniy_blok">
    <div class="blok">1</div>
    <div class="blok">2</div>
    <div class="blok">3</div>
    <div class="blok">4</div>
    <div class="blok">5</div>
    <div class="blok">6</div>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.blok {
  background-color: green;
  width: 150px;
  height: 150px;
  float: left;
  
}
 
.blok:nth-child(odd) {
  background-color: lightgreen;
}
 
.vnutrenniy_blok {
  background-color: red;
  display: inline-block;
}

JavaScript
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
//hack for jsfiddle, remove it after
  setCustomWidth(getInnerBlock());
//----------------------------
 
function getInnerBlock() {
  var result = null;
  var blocks = document.getElementsByClassName('vnutrenniy_blok');
 
  if (blocks.length) {
    result = blocks[0];
  }
 
  return result;
};
 
function setCustomWidth(element) {
  width = document.body.clientWidth;
 
  extraWidth = width % 150;
  exactWidth = width - extraWidth;
  
  exactWidth += extraWidth > 10 ? 10 : extraWidth;
 
  element.style.width = exactWidth + 'px';
};
 
window.onload = function() {
  setCustomWidth(getInnerBlock());
}
window.onresize = function(event) {
  setCustomWidth(getInnerBlock());
};

https://jsfiddle.net/29gLq1mj/31/

Не забудь удалить секцию для удаления которую я выделил в js (она нужна только на том сайте).

@barsuuuk · 04.03.2018, 18:43 **[ТС]**

Wlk,

Спасибо!
Все работает, Дмитрий, я только забыл ещё момент, можно еще добавить центрирование по горизонтали "vnutrenniy_blok" внутри "vneshniy_blok" ?

и про секцию для удаления выделеную в JS не понял что именно удалить, я в нем не смыслю.

еще раз спасибо!

@Wlk · 04.03.2018, 19:27

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="vneshniy_blok">
  <div class="vnutrenniy_blok">
    <div class="blok">1</div>
    <div class="blok">2</div>
    <div class="blok">3</div>
    <div class="blok">4</div>
    <div class="blok">5</div>
    <div class="blok">6</div>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.blok {
  background-color: green;
  width: 150px;
  height: 150px;
  float: left;
  
}
 
.blok:nth-child(odd) {
  background-color: lightgreen;
}
 
.vnutrenniy_blok {
  background-color: red;
  display: inline-block;
  margin: auto;
}
 
.vneshniy_blok {
  width: 100%;
  text-align: center;
  display: inline-block;
}

JavaScript
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
//hack for jsfiddle, remove it after
  setCustomWidth(getInnerBlock());
//----------------------------
 
function getInnerBlock() {
  var result = null;
  var blocks = document.getElementsByClassName('vnutrenniy_blok');
 
  if (blocks.length) {
    result = blocks[0];
  }
 
  return result;
};
 
function setCustomWidth(element) {
  width = document.body.clientWidth;
 
  extraWidth = width % 150;
  exactWidth = width - extraWidth;
  
  exactWidth += extraWidth > 10 ? 10 : extraWidth;
 
  element.style.width = exactWidth + 'px';
};
 
window.onload = function() {
  setCustomWidth(getInnerBlock());
}
window.onresize = function(event) {
  setCustomWidth(getInnerBlock());
};

https://jsfiddle.net/29gLq1mj/33/

Вот эту секцию которая подписана к удалению надо будет удалить. Она лишняя будет.

JavaScript
1
2
3
//hack for jsfiddle, remove it after
  setCustomWidth(getInnerBlock());
//----------------------------

Комментарий модератора

Песочница - это хорошо и удобно, но
Правила форума

4. Порядок создания тем.
4.11 Картинки и любые другие файлы загружайте на форум, во избежание их удаления или потери на сторонних ресурсах. По этой же причине коды программ также должны находиться на форуме.

@barsuuuk · 04.03.2018, 22:11 **[ТС]**

Wlk, еще раз спасибо за ответ.
прошу простить меня за назойливость,
я первый раз сталкиваюсь со скриптом, знаний мало,
никак не получается отдельный файл со скриптом прикрутить к HTML.

прошу помощи ещё раз.

имею следующие файлы,
HTML:

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
<!DOCTYPE html>
<html>
<head>
    <title>выравнивание</title>
    <meta http-equiv='content-language' content='ru' />
    <link rel="stylesheet" type="text/css" href="st.css">
    <script src="/js/script.js" type="text/javascript"></script>
</head>
<body>
 
<div class="vneshniy_blok">
  <div class="vnutrenniy_blok">
       <div class="blok">1</div>
       <div class="blok">2</div>
       <div class="blok">3</div>
       <div class="blok">4</div>
       <div class="blok">5</div>
       <div class="blok">6</div>
 
  </div>
</div>
 
</body>
</html>

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
.blok {
  background-color: green;
  width: 150px;
  height: 150px;
  float: left;
  
}
 
.blok:nth-child(odd) {
  background-color: lightgreen;
}
 
.vnutrenniy_blok {
  background-color: red;
  display: inline-block;
  margin: auto;
}
 
.vneshniy_blok {
  width: 100%;
  text-align: center;
  display: inline-block;
}

и скрипт в файле js/script.js

JavaScript
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
function getInnerBlock() {
  var result = null;
  var blocks = document.getElementsByClassName('vnutrenniy_blok');
 
  if (blocks.length) {
    result = blocks[0];
  }
 
  return result;
};
 
function setCustomWidth(element) {
  width = document.body.clientWidth;
 
  extraWidth = width % 150;
  exactWidth = width - extraWidth;
  
  exactWidth += extraWidth > 10 ? 10 : extraWidth;
 
  element.style.width = exactWidth + 'px';
};
 
window.onload = function() {
  setCustomWidth(getInnerBlock());
}
window.onresize = function(event) {
  setCustomWidth(getInnerBlock());
};

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

и мне очень стыдно

, что я не обдумал и не сформулировал задачу вернее,
т.е. сейчас всё отлично центруется, но можно ли поправить код скрипта, или CSS
чтобы блоки blok были в блоке vnutrenniy_blok тоже по центру, т.е. не к левому
краю прижимались, а слева и справа была суммарно одинаковая прибавка до 10px, т.е. слева до 5px и справа до 5px.

Вы бы мне очень помогли.

после этого обязательно постараюсь вникнуть во все действия скрипта,
но сейчас туп как тулуп )

@Wlk · 04.03.2018, 22:48

Body:

HTML5
1
2
3
4
5
<div class="vneshniy_blok">
  <div class="vnutrenniy_blok">
    <div class="blok">1</div><div class="blok">2</div><div class="blok">3</div><div class="blok">4</div><div class="blok">5</div><div class="blok">6</div>
  </div>
</div>

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
.blok {
  background-color: green;
  width: 150px;
  height: 150px;
  display: inline-block;
  
}
 
.blok:nth-child(odd) {
  background-color: lightgreen;
}
 
.vnutrenniy_blok {
  background-color: red;
  display: inline-block;
  margin: auto;
  text-align: center;
}
 
.vneshniy_blok {
  width: 100%;
  text-align: center;
  display: inline-block;
}

Лишний слэш в начале пути

HTML5
1
<script src="js/script.js" ...

@AlexZaw · 08.03.2018, 10:50

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

exactWidth += extraWidth > 10 ? 10 : extraWidth;

А какой смысл в этой проверке? extraWidth при любом размере экрана будет больше 10, так не проще написать
exactWidth += 10?

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@barsuuuk 0 / 0 / 0 Регистрация: 04.03.2018 Сообщений: 40
	04.03.2018, 18:43 [ТС]
	Wlk, Спасибо! Все работает, Дмитрий, я только забыл ещё момент, можно еще добавить центрирование по горизонтали "vnutrenniy_blok" внутри "vneshniy_blok" ? и про секцию для удаления выделеную в JS не понял что именно удалить, я в нем не смыслю. еще раз спасибо! 0

Ширина блока DIV по условию от ширины страницы

Решение