Скажите, пожалуйста, что не так с данным кодом (мне нужно, чтобы на сайте был блок с картинкой справа и текстом слева)?

Question

[roxynz]

По этому коду картинка ниже текста, я не знаю, как поправить.
Вот код html:

<div class="wrapper1">
  <div class="content-splitter">
   <div class="left">
    <div class="block"> лалалалал
    </div>
   </div>
  
   <div class="right">
    <img src="орден_ленина.png" alt="">
   </div>
  </div>
 </div>

А вот код css:

.wrapper1 {
 display: grid;
 grid-template-columns: 2fr 1fr;
 width: 1500px;
 height: 300px;
 box-shadow: 1px 1px 25px 3px rgba(0,0,0,.3);
}

.content-splitter {
 display: flex;
 flex-direction: column;
 gap: 0em;
}

.left {
 display: flex;
 flex-direction: column;
 gap: 4em;
 padding: 90px 60px;
 width: minmax(80px, 80%);
 font-size: 1.4em;
 line-height: 28px;
}

.block { 
  display: flex;
  flex-direction: column;
  gap: .75em;
}

.right {
 overflow: auto;   
 
 object-fit: contain;
}

Comments

[HardBot]

У меня картинка не грузит, увы.

[HardBot]

Аа, понимаю. Код так-то в тег code закинь.

Answer 1

[HardBot]

<div class="wrapper1">
    <div class="content-splitter">
        <div class="left">
            <div class="block"> лалалалал</div>
        </div>
        <div class="right">
            <img src="https://img4.goodfon.ru/wallpaper/nbig/1/7c/kartinka-loshadi-liubov-serdechki.jpg" alt="">
        </div>
    </div>
</div>

.wrapper1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    width: 1500px;
    height: 300px;
    box-shadow: 1px 1px 25px 3px rgba(0, 0, 0, .3);
}

.content-splitter {
    display: flex;
    gap: 0em;
}

.left {
    display: flex;
    flex-direction: column;
    gap: 4em;
    padding: 90px 60px;
    width: minmax(80px, 80%);
    font-size: 1.4em;
    line-height: 28px;
}

.block {
    display: flex;
    flex-direction: column;
    gap: .75em;
}

.right {
    overflow: auto;

    object-fit: contain;
}