Jump to content
  • 0

Спозиционировать элемент в нужное место по горизонтали, не выводя из потока


Launder
 Share

Question

Вот кот. Предполагается, что элемент не выводится из потока (по крайней мере, нужно чтоб он взаимодействовал в "строке" с другими элементами, предполагается, что за block-center могут также находится элементы). Загвоздка следующая: левый блок (block-1) имеет минимальный размер в пикселях(150px) и натуральный размер в rem (15rem, при том, что 1rem = 10px). Хочется оставить пользователю возможность менять в браузере размер шрифта, при этом положение левого края второго элемента (block-center) должно оставаться посередине (или в ином заданном месте).

Для второго элемента указано свойство:

        padding-left: calc(50% - 15rem);    /* тут может быть и 150px*/

При использовании rem во-второй части выражения, элемент уходит вправо, при маленьком шрифте (отнимается меньше - отступ больше),

если в выражении использовать пиксели, то элемент уйдёт вправо при большом шрифте (просто левый элемент увеличится).

И в том, и в другом случае, для компенсации сдвига вправо, нужно сдвинуть элемент ВЛЕВО. Но сдвинуть не абсолютно, а при условии. Основные инструменты для сдвигов: марджины паддиги и бордеры прилежащих сторон элементов block-1 и block-center... Можно было бы как-то изловчится с паддингами (что-то вроде 15rem - 150px, положительное значение будет только при значении браузерного шрифта большего, чем по-умолчанию, значит только тогда он и начнёт работать), но паддинг может сдвинуть только вправо. Марджин может сдвинуть и туда и туда, но он безусловен, то есть, не может в одном случае сдвигать, а в другом - не сдвигать.

Была идея как-то сделать, чтоб паддинг и марджин взаимно компенсировали друг друга, когда нам надо, а когда не нужно паддинг, стал меньше нуля, и исчез, но на практике мне не удалось это реализовать.

В случае, когда отнимаем rem (в указанном выше коде), при нулевом font-size отступ максимален. Соответственно, сдвиг влево должен быть максимален и равняться ширине элемента block-1 в пикселях. Допустим ставим элементу block-center отрицательный левый марджин (или отрицательный правый марджин ставим block-1), сдвигая block-center на нужную величину, а, чтоб при увеличении шрифта отступ уменьшался, пишем block-1 {margin-right: calc(15rem - 150px)}, что при маленьких шрифтах будет сдвигать блок block-center влево, но при больших будет сдвигать вправо и как это компенсировать - не понятно.

В случае, когда отнимаем px, при маленьких шрифтах всё хорошо, поскольку и block-1, и отступ - нужных размеров, но когда шрифт увеличивается, элемент block-1 увеличивается, а расстояние между блоками block-1 и block-center остаётся таким же, и опять-таки нужно каким-то образом компенсировать, а любой марджин - будет действовать в обе стороны, а паддинг - в одну, но только вправо, а мне нужно налево:rolleyes:.

В общем, не оставляют меня мысли, что тут можно применить какую-то хитрость и скомпенсировать увеличение отступа, при изменении шрифта, но что-то, как не изгаляюсь, паддинг сдвигает не туда, марджин сдвигает не только туда, но и не туда, при этом паддинг это "не туда" скомпенсировать не может, поскольку сам вылезает туда же, в "не туда"...

Каким образом приручить эти элементы?

 

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

А если разделить container на две части по 50% и block-center просто прижать к левой части?

Ну или не мучиться, а выравнивать его с помощью js ?

Хотя в любом случае может возникнуть ситуация когда количество текста в block-1 в сочетании с размером шрифта сыграют злую шутку и элементы наложатся друг на друга

Link to comment
Share on other sites

  • 0
12 часов назад, AlexZaw сказал:

А если разделить container на две части по 50% и block-center просто прижать к левой части?

Да нет, понятно, что так можно сделать, да и много как по-другому сделать можно. Тут вопрос именно в том, чтоб html трогать по-минимуму и разобраться в возможностях CSS.

 

12 часов назад, AlexZaw сказал:

Ну или не мучиться, а выравнивать его с помощью js ?

Ну так можно наверняка.

 

12 часов назад, AlexZaw сказал:

Хотя в любом случае может возникнуть ситуация когда количество текста в block-1 в сочетании с размером шрифта сыграют злую шутку и элементы наложатся друг на друга

В этом Вы абсолютно правы. Надеяться на контент, в любом случае, не вполне правильный подход, на другой ОС, в другом браузере, что-то может отобразиться немного по-другому. Но с другой стороны, если наверняка знаешь, что контент будет меняться редко, то, наверное, можно воспользоваться этим костылём...

Link to comment
Share on other sites

  • 0

Опираясь на свои знания css, на мой взгляд, самый адекватный способ это менять маржин у block-center с помощью js, хотя вчера видел пару игр  на чистом html+css, и теперь не уверен что вашу задумку нельзя реализовать с помощью css :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Marri.nich
      Всем привет) Самостоятельно обучаюсь верстке. Сейчас изучаю Bootstrap и столкнулась с такой проблемой: 
      <header>         <nav>             <div class="container">                 <ul class="menu">                     <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li>                     ...                     <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li>                 </ul>             </div>         </nav> </header> Использую в верстке стандартный контейнер из Bootstrap'а. Его стили не трогаю.
      Сейчас корплю над адаптивностью сайта и при изменении размера устройства (в консоли разработчика) на 768px шапка вылезает за пределы экрана.
      Как удалось выяснить header принимает требуемое значение width: 768px, а вот nav упорно занимает 993px и они тянутся от container'а (он согласно стилям Bootstrap'а имеет max-width: 720px, но его margin-left и margin-right почему-то принимают значение 136,50px. 
      Дополнение: тегу nav в стилях задан width: 100%.
      Вопрос:
      1. Правильно ли я понимаю, что cтандартный контейнер из Bootstrap'а должен был в данном примере рассчитаться так: width=max-width=720px, margin-left=margin-right=(768px-720px-12pxpadding-left-12pxpadding-right)/2=12px?
      2. Почему margin'ы работают не так как я ожидаю?)
      Если я что-то неясно или не совсем корректно изложила прошу понять и простить :)))
      Спасибо за ответы.
       
    • By Twix
      Добрый день. Создал меню горизонтальное и по макету нужно сделать между меню полоску.
      как должно выглядеть: Фото меню

      Я ее добавил в <li>border-right: 1px solid #fff. и у последней ссылки ее нужно убрать. как сделать чтобы рамка не виднелась???

      хотел отдельно последний пункт меню взять в ид и убрать ее. но чтото не получается.
      <li id="contact_us">
      <a href="#">CONTACT US</a>
      </li>

      кроме как вставлять блок или картинку чтоб замазать ничего не приходит в голову. подскажите пожалуйста реально ли ее убрать через стили ?
    • By Nerwoid
      Ребят всем привет! Я только начал изучать верстку по видео урокам на ютубе. У меня есть свой макет который я купил у дизайнера. Решил с него поучиться верстать. Подскажите как правильно сделать шапку сайта. У меня все выравнивания происходят с помощь отрицательных "margin".  Судя по урокам, везде делают это с помощью flex и тому подобное. Дизайн очень оказался сложным и там много проблем с фонами. Дайте пару советов и подсказок как продолжать дальше. Заранее спасибо ?
       
      Вот: макет:
      Мой сайт
       
    • By maxfloyd
      Здравствуйте. padding подгоняется не четко, при изменении масштаба видно изъяны (подсветка кнопки не на всю высоту или на оборот больше чем нужно)

      Код: https://jsfiddle.net/aemjkhp9/
    • By dsljkeee
      Доброго времени суток, как можно осуществить данную проблему?
      Как показано на картинке, в бордере имеется пространство которое заполнено иконкой, как именно сделать такое пространство? 

  • Обсуждения

    • Например, добавить  .wrapper li {     clear: both; } http://jsfiddle.net/e3f9ozLr/
    • Ты в стрелочной функции из-за того что у тебя одно выражение опустил { }. А это ведет к неявному возврату результата выражения.
    • Здравстуйте, каким образом можно получить доступ к Mathcad Application Server для получения доступа к документам и функциям Mathcad через Интернет. Может быть, есть другой способ связать интернет с Mathcad ?
    • Прошу помочь с заданием: Написать файл скрипта, который генерирует три числа, соответствующие значениям высоты, длины и ширины комнаты. Отобразить в консоли: a.Площадь стен комнаты b.Объём комнаты c.*Объём комнаты за вычетом случайно сгенерированного количества чисел, которые определяет объёмы случайно зашедших в комнату людей. (в итоге запустит скрипт последством консоли) (заранее огромное спасибо)
    • Попробуйте поиграться в этом направлении: Но то что касается применения фильтров с изменением визуального отображения конечного изображения — то повторить его 1:1, скорей всего, не выйдет. Для этого используются изображения с применённым фильтром отдельным файлом
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy