Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/6: Рейтинг темы: голосов - 6, средняя оценка - 5.00
 Аватар для Уф
890 / 725 / 447
Регистрация: 13.07.2015
Сообщений: 2,277

Выглядывание блока справа на 10px независимо от его ширины

03.05.2017, 10:51. Показов 1147. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
суть задачи на картинке
Миниатюры
Выглядывание блока справа на 10px независимо от его ширины  
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
03.05.2017, 10:51
Ответы с готовыми решениями:

Принудительное обтекание, независимо от ширины блока родителя
Задача простая - есть блок div, ширина 250px. Внутри него должны быть расположены 3 картинки, каждая с шириной 100pх. Необходимо...

Выравнивание фиксированного блока по ширине + блоки автоматической ширины слева и справа
Здравствуйте. Просьба сильно не пинать, поиском пользовался, но везде предлагают случай с выравниванием ОДНОГО блока c помощью margin:...

Сворачивание блока справа налево, заменяя его другим блоком
Сворачивание блока с право, налево заменяя его другим блоком Доброго времени суток! Кто хорошо знаком с Jquery? Подскажите...

4
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
03.05.2017, 11:39
CSS
1
left:calc(100% - 10px);
0
 Аватар для Уф
890 / 725 / 447
Регистрация: 13.07.2015
Сообщений: 2,277
03.05.2017, 12:18  [ТС]
ок. а как сделать чтобы по правому краю выглянул при hover?
песочница
CSS
1
2
3
4
5
6
7
8
9
10
#menu {
   border: 1px solid black;
   background: #cfc;
   left:calc(100% - 10px);
   position: relative;
   display: inline-block;
}
#menu:hover {
  right: 0px;
}
HTML5
1
<div id="menu">tegdsgsdgsgsgssgsgsg</div>
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
03.05.2017, 12:45
Лучший ответ Сообщение было отмечено Уф как решение

Решение

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
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    .wrapper {
      width: 600px;
      height: 100px;
      position: relative;
      border: 1px solid black;
    }
    
    #menu {
      border: 1px solid black;
      background: #cfc;
      left: calc(100% - 10px);
      position: absolute;
      transition: .5s linear;
    }
    
    #menu:hover {
      transform: translateX(calc(-100% + 10px));
    }
  </style>
</head>
 
<body>
  <div class="wrapper">
    <div id="menu">tegdsgsdgsgsgssgsgsg</div>
  </div>
 
</body>
 
</html>
0
 Аватар для Уф
890 / 725 / 447
Регистрация: 13.07.2015
Сообщений: 2,277
04.05.2017, 10:22  [ТС]
спасибо. сделал просто скрытие всего контента
CSS
1
2
3
4
5
6
7
8
9
10
11
#regform.user {
    width: 20px;
    height: 20px;
    overflow: hidden;
}
 
#regform.user:hover {
    width: auto;
    height: auto;
    overflow:auto;
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
04.05.2017, 10:22
Помогаю со студенческими работами здесь

Как с css сделать высоту блока равной его ширине при том что точное значение ширины не известно?
Ширина блока задана как &quot;width: 100%&quot;, то есть 100% от родительского блока. Как задать высоту блока в процентах не от родителя а от своей...

Стандартный вид блоков независимо от ширины экрана
Есть 3 блока которые с помощью float:left располагаются друг за другом горизонтально. Всем 3 блокам задана ширина 400 пикселей. При...

Как уместить текст в одну строку независимо от ширины символов в ней
Добрый день! Уважаемы форумчане, просьба помочь в решении следующей задачи. Я написал макрос, который вставляет строку в шаблон word....

Расположить картинку по центру блока независимо от разрешения
Нужно сделать так, чтобы картинка даже при изменении окна браузера все равно оставалась в центре

Обрезать картинку слева и справа при уменьшении ширины экрана
Картинка выравнивается по центру экрана. Уменьшаю ширину экрана справа налево так, что она становится меньше ширины картинки. Блок, в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
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 , при. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru