Расположить div рядом с другим div

как я могу добиться следующего эффекта:

ИМГ

У меня есть это:

<div id='div1'>
  text
  <div id='div2'>text</div>
</div>

#div1{
  text-align:center;
  background:blue;
  width:100px;
}

#div2{
  position: absolute;
  background:red;
  top:8px;
  left:108px;
}

Но когда размер окна изменяется, div 2 перемещается относительно размера окна.

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
1
0
33
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Создайте контейнер с flexbox (см.: https://css-tricks.com/snippets/css/a-guide-to-flexbox/), а затем расположите их таким образом. Вы можете сделать это с позиционированием, но это кажется излишне сложным для того, чего вы пытаетесь достичь, и это создаст больше проблем при изменении размера экрана, как вы обнаружили. Позиция является относительной, поэтому при изменении размера экрана меняется и ваше положение. Этот метод даст вам больше контроля над позиционированием элементов, если вы хотите, чтобы они находились в определенных местах и ​​макетах.

.container {
  display: flex;
  flex-direction: row;
  border: 1px solid black;
  width: 200px;
}

#div1 {
  text-align: center;
  background: blue;
  width: 100px;
  height: 200px;
}

#div2 {
  background: red;
    margin-top: 50px;
  width: 100px;
  height: 100px;
}
  <div class="container">
    <div id='div2'>text</div>
    <div id='div1'>text</div>
  </div>

Это частично сработало для того, что я хочу. Я использую бутстрап, и когда я использую присланный вами код, он съедает часть столбца и имеет непропорциональный макет.. например: img001.prntscr.com/file/img001/YJS0hE8bRUOAg5XTPHQ2sw.png @AStombaugh

jacksonFive5 23.04.2022 15:23

@ jacksonFive5 Извиняюсь за путаницу, но вы не упомянули в своем посте, что используете Bootstrap, поэтому я написал чистый CSS. Bootstrap имеет свои собственные классы и атрибуты, поэтому, если вы начнете что-то добавлять, вы можете столкнуться с некоторыми конфликтами. Если вы еще не решили эту проблему, можете ли вы опубликовать код с этим содержимым, и я посмотрю, смогу ли я устранить неполадки оттуда? :)

AStombaugh 25.04.2022 13:07

Другие вопросы по теме