Nano Hash - криптовалюты, майнинг, программирование

перекрывать div с относительным позиционированием?

Можно ли перекрывать элементы div с помощью CSS без использования абсолютных координат, то есть с относительным позиционированием?

У меня есть фоновое изображение, которое я разделил на 3 вертикальные части,

  • 1-й выровнен по левому краю,
  • 2-й повторяется через середину,
  • 3-й выравнивается по правому краю

Затем я хочу, чтобы мой основной контент сайта был по центру. Я не уверен, как это сделать без использования абсолютного позиционирования.

      Kinda like this

|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|
|$$$$$|----------------------|&&&&&|
|$$$$$|                      |&&&&&|
|$$$$$|                      |&&&&&|
|$$$$$|shakeyour<body></body>|&&&&&|
|$$$$$|                      |&&&&&|
|$$$$$|                      |&&&&&|
|$$$$$|----------------------|&&&&&|
|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|

      Different symbols = differnt background image or pattern

Я думал о том, чтобы фоны были как три div, а затем абсолютно позиционировался body div, но я хочу, чтобы он был центрирован для широкоэкранных дисплеев. Любые идеи?

For example, the expected behavior under resizing:

|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|
|$$$|--------------------------|&&&|
|$$$|                          |&&&|
|$$$|                          |&&&|
|$$$|  shakeyour<body></body>  |&&&|
|$$$|                          |&&&|
|$$$|                          |&&&|
|$$$|--------------------------|&&&|
|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|

---  

|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|
|$|------------------------------|&|
|$|                              |&|
|$|                              |&|
|$|   shakeyour<body></body>     |&|
|$|                              |&|
|$|                              |&|
|$|------------------------------|&|
|$$$$$|**********************|&&&&&|
|$$$$$|**********************|&&&&&|
html css overlap
31.12.2010

  • Я просто должен дополнить вас превосходным искусством ascii. 21.02.2011

Ответы:


1 
<div style="float: left; width: 20%;">Left</div>
<div style="float: left; width: 60%; margin: 0 20%;">Center</div>
<div style="float: right; width: 20%;">Right</div>

Вам нужно что-то вроде этого. Конечно, переместите стили в файл CSS и добавьте свои фоны.

31.12.2010
  • И если вы не хотите, чтобы это было на 100% экрана, поместите ‹div› вокруг всех трех ‹div› в моем ответе выше и укажите любой размер, который вы хотите + style=margin: auto; 31.12.2010
  • Спасибо за быстрый ответ! не беспокойтесь об опечатках от вашего чувака ежевики, все хорошо. Посмотрите, что я изменил, чтобы вы могли увидеть, что я ожидаю от поведения при изменении размера. 31.12.2010
  • чтобы центрировать основное тело, это немного сложно для разных браузеров. я проверю, когда вернусь домой 31.12.2010
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..