Как отобразить элемент справа между элементами, используя css

Question

У меня есть элемент 1, элемент 2, элемент 3 на странице мая, как я могу разместить element3 справа вверху внизу element1 справа вверху? Это должно выглядеть следующим образом:

Я прочитал много примеров, но у меня не получилось, я пытался использовать

position: absolute; float: right;

с позицией: absolutetel он помещает этот элемент в верхнюю часть страницы, но я не хочу этого, максимум, которого я достиг, в правой нижней позиции Также я пытался использовать:

margin-top: -150px;

это тоже не помогло, при минимизации windows становится беспорядок:

Пожалуйста, помогите мне решить эту проблему Проблема?

Отредактировано: 1999,19,1600 +, 8 is .hero-fact-title, Основана в Хельсинки, Офисы, Цифровые местные жители, Design Stud ios is .hero-fact-description, .fact-summary это то, что текст я хочу переместить также это element3 .

 .fact-wrapper {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-gap: 3px;
  //display: inline-block;

  &__hero-fact-title {
    width: 90px;
    height: 42px;
    font-family: MaisonNeue;
    font-size: 32px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: -1px;
    color: #333333;
  }

  &__hero-fact-description {
    width: 193px;
    height: 22px;
    font-family: MaisonNeue;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #333333;
  }
}
.fact-summary {
  width: 596px;
  height: 96px;
  font-family: MaisonNeue;
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  color: #333333;
  float: right;
}

, чтобы отобразить этот беспорядок на странице, я использую код ниже :

<div className="fact-wrapper">
    {facts.map(obj => {
      return (
        <div>
          <div className="fact-wrapper__hero-fact-title">{obj.title}</div>
          <div className="fact-wrapper__hero-fact-descriptio">
            {obj.description}
          </div>
        </div>
      )
    })}
  </div>
  <h2 className="fact-summary">{factSummary}</h2>

Answer 1

Использовать flexbox

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80%;
  margin: 0 auto;
}

.bottom {
  display: flex;
  align-items: flex-start;
}

.box {
  display: flex;
  flex: 1;
  margin: 5px;
}

.box-one {
  border: 2px solid tomato;
  padding: 2rem 5px;
}

.box-two {
  border: 2px solid teal;
  padding: 2rem 5px;
}

.box-three {
  border: 2px solid goldenrod;
  padding: 1rem 5px;
}

<div class="container">
  <div class="top">
    <div class="box box-one">box one</div>
  </div>
  <div class="bottom">
    <div class="box box-two">box two</div>
    <div class="box box-three">box three</div>
  </div>
</div>

Answer 2

Я бы предложил вам использовать flex.

По сути, у вас есть две строки. Первая строка - это простой div. Вторая строка представляет собой сочетание двух элементов div рядом.

Существует несколько вариантов размещения их рядом с вами, но обычно в будущих изменениях лучше использовать flex.

. это работает, вам нужно 1. Добавить «display: flex» в родительский div. 2. Добавьте стиль «flex-grow: 1» для детей. Вот и все.

Flex-grow определяет способность растущего элемента при необходимости расти.

<div>
  <div class='block'>Element 1</div>

  <div class='parent'>
    <div class='block child'>Elemet 2</div>
    <div class='block child'>Elemet 3</div>
  </div>
</div>


.parent {
  display: flex;
}
.child {
  flex-grow: 1;
}
.block {
  padding: 10px;
  border: 1px solid #ccc
}

Пример: https://codepen.io/tony-freed/full/vYOrYVE

Подробнее об этом можно узнать здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Вы можете использовать Flexbox, задав flex-basis: 100% первому элементу, например,

main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
} 

div { 
  box-sizing: border-box;
  border: 5px solid currentColor; 
  flex-basis: calc(50% - 5px);  
  margin-bottom: 10px;
}

.e1 { color: red; flex-basis: 100%; }
.e2 { color: blue; }
.e3 { color: green; }

<main>
  <div class="e1">element 1</div>
  <div class="e2">element 2 <br /><br />Lot of text</div>
  <div class="e3">element 3</div>
</main>