2

На странице много блоков заданной ширины и высоты, при изменении ширины экрана они адаптируются под нее. Но есть один блок шириной в два стандартных. Он всегда должен быть расположен в правом верхнем углу. Проблемы с отступом слева (прижат к правому краю), помогите прижать его влево.

<html>
<head>
</head>
<body>

<div style="float:right; width: 200px; height: 100px; border: solid red 1px; ">проблемный блок</div>
	
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: left; width:100px;height: 100px;">стандартные блоки</div>
</body>
</html>

введите сюда описание изображения

11
  • И в чем проблема?
    – user212578
    Commented 6 апр. 2017 в 22:11
  • 1
    Проблемный блок прижимается к правому краю экрана, в то время как все остальные выстраиваются ровными рядами/колонками
    – Vadim
    Commented 6 апр. 2017 в 22:14
  • Ну так он же там и должен быть, судя по описанию
    – user212578
    Commented 6 апр. 2017 в 22:15
  • Сложно было выразить мысль, наверно плохо получилось. Проблемный блок должен заменить два стандартных в правом верхнем углу. При изменении ширины экрана лишние в ряду должны перемещаться ниже
    – Vadim
    Commented 6 апр. 2017 в 22:19
  • 1
    не, без js тут точно не обойдется .... Commented 6 апр. 2017 в 22:41

1 ответ 1

2

<html>
<head>
</head>
<body>

<div style="float:right; width: 200px; height: 98px; border: solid red 1px; ">проблемный блок</div>
	
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
<div style="float: right; width:100px;height: 100px;">стандартные блоки</div>
</body>
</html>

Задай всем div float: right. Думаю это будет самое простое решение проблемы

1
  • Не так не получится, проблемный блок должен всегда находится в правом верхнем углу. Решил при помощи js с показом блока в нужном месте, в зависимости от ширины окна
    – Vadim
    Commented 25 апр. 2017 в 15:47

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.