@koff78

Как задать ширину блока DIV вычисляемую от ширины окна браузера?

имею следующее:
CSS (в отдельном файле):

.vneshniy_blok{
	width: 100%;
	height: 100%;
	background: yellow;
}

.vnutrenniy_blok{
	width: auto;
	height: auto;
	background: blue;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.blok{
	width: 150px;
	height: 100px;
	background: white;
	float: left;
}


HTML:

<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>


Блок vnutrenniy_blok по ширине растягивается автоматом на весь экран по ширине vneshniy_blok,
надо же, чтобы бы он был по ширине блоков block умещающихся в строке и размещался по центру vneshniy_blok.

как задать ширину для блока 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.

вроде суть изложил, надеюсь понятно

как реализовать это на JavaScript?
  • Вопрос задан
  • 1019 просмотров
Пригласить эксперта
Ответы на вопрос 1
KickeRocK
@KickeRocK
FrontFinish
Я люблю, конечно, логические(и не очень) задачки, но чет условие какое-то странное.

function ost(el) {
  var ok = el%150;
  if(ok==0){
    return el;
  }else {
    return (el - ok + 10);
  }
}

пробегись по всем div'ам нужного контейнера, на вход функции(которая выше) нужно отдать твоё кол-во пикселей и закинуть результат в .style.width
var vse_divi = document.getElementsByClassName('blok');
    var nadow = ost(window.innerWidth);
    for (var i = 0; i < vse_divi.length; i++) {
      vse_divi[i].setAttribute("style" , "width:" + nadow + "px");
    }

Если я правильно зависимости понял.
Ну-а вообще такие задачи лучше самому думать, неплохие знания дают по массивам, перебору и т.п.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы