Ширина блока 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?

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

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

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

Решение