Как разместить блок с текстом в правой стороне сайта без использования позиционирования?
Приветствую всех!
Иногда простые с первого взгляда задачи ставят меня в тупик. Вот и сегодня не могу справится с задачей правильными способами.
По задумке текст должен начинаться от середины страницы сайта, чтобы текст не шел по лицу человека на фото.
Если бы там был еще текст слева, то флекс-бокс или грид решили бы этот вопрос, распределив 2 элемента по краям, но элемент всего один. Я пробовала использовать абсолютное позиционирование:
<section class="before-sale"> <div class="before-sale-inner"> <div class="container"> <div class="before-sale-items"> <h2 class="large-title">Что такое предпродажная подготовка?</h2> <p class="watch_right-text">Предпродажная подготовка нужна в тех случаях, когда хочется продать изделие дороже. Мастер проведет техничесий осмотр механизма, при необходимости сделает полировку корпуса и стекла, устранит микроцарапины на металическом корпусе и браслете, если они имеются. Возможно, потребуется провести ремонт, отладку, смазку часового механизма, настройку точности хода. Также, может возникнуть необходимость замены ремешка, стекла, стрелок, заводной головки и других деталей.</p> </div> </div> </div> </section> |
<section class="before-sale"> <div class="before-sale-inner"> <div class="container"> <div class="before-sale-items"> <h2 class="large-title">Что такое предпродажная подготовка?</h2> <p class="watch_right-text">Предпродажная подготовка нужна в тех случаях, когда хочется продать изделие дороже. Мастер проведет техничесий осмотр механизма, при необходимости сделает полировку корпуса и стекла, устранит микроцарапины на металическом корпусе и браслете, если они имеются. Возможно, потребуется провести ремонт, отладку, смазку часового механизма, настройку точности хода. Также, может возникнуть необходимость замены ремешка, стекла, стрелок, заводной головки и других деталей.</p> </div> </div> </div> </section>
.before-sale-inner{ position: relative; background-image: url(images/bg-dark-master.jpg); content: ""; background-size: cover; background-position: bottom; background-repeat: no-repeat; max-width: 100%; height: 100vh; margin-bottom: 20px; } .before-sale-items { display: block; max-width: 600px; position: absolute; top: 0; right: 100px; bottom: 0; left: 1000px; } |
.before-sale-inner{ position: relative; background-image: url(images/bg-dark-master.jpg); content: ""; background-size: cover; background-position: bottom; background-repeat: no-repeat; max-width: 100%; height: 100vh; margin-bottom: 20px; } .before-sale-items { display: block; max-width: 600px; position: absolute; top: 0; right: 100px; bottom: 0; left: 1000px; }
Но при адаптиве приходится писать очень много брейкпоинтов. Мне не лень, но кажется, что это неправильно, когда в коде множество параметров под каждое значение, то есть каждый раз, когда уменьшаешь на 100px экран, придется писать новые параметры. Выглядит не очень профессионально)
Хочется именно правильным способом. То есть "заколхозить" конским margin размером в 600px я могу, но что-то мне подсказывает, что это ошибочное решение.
Есть еще совсем сомнительный вариант написать текст слева, сделать его прозрачным и распределить 2 текста с помощью justify-content: space-between. Но это решение мне кажется еще более странным.
Помогите, пожалуйста, сделать так, чтобы блок с текстом начинался от середина. Как же мне объяснить css, что блок должен начинаться от лысины этого мастера?
Благодарю заранее всех за посильную помощь криворуким ученикам вроде меня))
Дополнительно:
а flex, grid вам разве не поможет ?
grid вообще может выполнять роль position
Но, на всякий случай, для надо не писать много брейкпоинтов при адаптиве. Задали ширину в половину контентной области и прибили левым краем к середине. Потом один раз перестроили на всю ширину.
2. Просто обычной шириной 50% от контейнера и margin-lef: auto.
3. Флексами. Аналогично как выше, только двигаем с помощью флексовых свойств.
4. Гридами = как флексами.
5. Гридами в две ячейки. Текстом занимаем правую.
Ещё как-нибудь так
<div class="container"> <div class="block"> <div class="text"> Lorem ipsum... </div> </div> </div> |
<div class="container"> <div class="block"> <div class="text"> Lorem ipsum... </div> </div> </div>
Три варианта, как минимум
На гридах
.block { display: grid; grid-template-columns: 1fr 1fr; } .text { grid-column: 2 / 3; } |
.block { display: grid; grid-template-columns: 1fr 1fr; } .text { grid-column: 2 / 3; }
На флексах
.block { display: flex; } .text { width: 50%; margin-left: auto; } |
.block { display: flex; } .text { width: 50%; margin-left: auto; }
Самое простое
.text { margin-left: 50%; } |
.text { margin-left: 50%; }
- Спасибо Вам большое, за ответ и за ангельское терпение! Теперь буду знать! Благодарю от души!))
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для размещения блока с текстом в правой стороне сайта без использования позиционирования, можно воспользоваться свойством float в CSS.
Пример кода на HTML и CSS:
.content { width: 70%; /* ширина основного контента */ float: left; /* выравнивание блока влево */ } .sidebar { width: 30%; /* ширина боковой панели */ float: right; /* выравнивание блока вправо */ } <div class="content"> <p>Основной контент здесь</p> </div> <div class="sidebar"> <p>Боковая панель здесь</p> </div>.content { width: 70%; /* ширина основного контента */ float: left; /* выравнивание блока влево */ } .sidebar { width: 30%; /* ширина боковой панели */ float: right; /* выравнивание блока вправо */ } <div class="content"> <p>Основной контент здесь</p> </div> <div class="sidebar"> <p>Боковая панель здесь</p> </div>
В данном примере основной контент будет занимать 70% ширины страницы и будет выравниваться влево, а боковая панель будет занимать 30% ширины страницы и будет выравниваться вправо. При этом блоки будут автоматически выстраиваться рядом друг с другом без использования позиционирования.
Таким образом, используя свойство float в CSS, можно легко разместить блок с текстом в правой стороне сайта без использования позиционирования.