Как поместить текстовые поля и текстовые вставки друг на друга рядом с радио?

Question

Мне нужно сделать домашнее задание на веб-сайте, и у меня возникла проблема с размещением ввода текста и текстовой области друг над другом рядом с большим блоком радио.Я видел подобное сообщение о переполнении стека, но моя проблема не была решена с этим. Мне нужно что-то вроде этого: https://i.stack.imgur.com/MUApR.png

.szavazas {
  margin-left: 5%;
  margin-top: 3%;
}

.raddio {
  float: left;
  width: 200px;
  margin-bottom: 5%;
  color: white;
  background: green;
  border-radius: 8px;
  border: 1px solid #003300;
  text-align: left;
  box-shadow: 0 0 2px 1px black;
  height: 350px;
}

input[type="radio"] {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
}

.velemeny {
  float: left;
  box-shadow: 0 0 2px 1px black;
  width: 200px;
  height: 175px;
}

.textin {
  float: left;
  border: 1px solid black;
  background-color: #003300;
  color: white;
  width: 200px;
  height: 165px;
}

<div class="szavazas">
  <form class="raddio" action="/action_page.php">
    <input type="radio" name="noveny" value="Nagy Flamingóvirág">Nagy Flamingóvirág<br>
    <input type="radio" name="noveny" value="Gerbera">Gerbera<br>
    <input type="radio" name="noveny" value="Szobai Futóka">Szobai Futóka<br>
    <input type="radio" name="noveny" value="Rákvirág">Rákvirág<br>
    <input type="radio" name="noveny" value="Zöldike">Zöldike<br>
    <input type="radio" name="noveny" value="Borostyán">Borostyán<br>
    <input type="radio" name="noveny" value="Azálea">Azálea<br>
    <input type="radio" name="noveny" value="Anyósnyelv">Anyósnyelv<br>
    <input type="radio" name="noveny" value="Tarka Sárkányfa">Tarka Sárkányfa<br>
    <input type="radio" name="noveny" value="Filodendron">Filodendron<br>
  </form>
  <textarea class="velemeny" rows="7" cols="40" placeholder="Irja le a véleményét a növényről/virágról és hogy találkozott-e már vele? "></textarea>
  <form class="textin" action="/action_page.php">
    Itt lesz valami hosszu szoveg amit ide fogok irni <br>
    <input type="text" name="masiknoveny">
  </form>
</div>

Answer 1

Я внес некоторые изменения в ваш код и достиг нижеуказанного результата.Надеюсь, это то, что вы хотите.

.raddio, .right-side {
    float: left;
    width: 300px;
    margin-bottom: 5%;
    color: white;
    background: green;
    border-radius: 8px;
    border: 1px solid #003300;
    text-align: left;
    box-shadow: 0 0 2px 1px black;
    height: 350px;
}
.right-side{
    width: 205px;
    margin-left: 15px;
    border-width:0;
    background: transparent;
    box-shadow: none;
}

input[type="radio"] {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
}

.velemeny {
    /* float: left; */
    box-shadow: 0 0 2px 1px black;
    width: 200px;
    height: 175px;
    border-radius: 8px;
    box-sizing: border-box;
    margin-bottom: 15px;
}

.textin {
    /* float: left; */
    border: 1px solid black;
    background-color: #003300;
    color: white;
    width: 200px;
    height: 160px;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 0 2px 1px black;
    }

    <div class="layout">
        <form class="" action="/action_page.php">
            <div class="left-side raddio">
                <input type="radio" name="noveny" value="Nagy Flamingóvirág">Nagy Flamingóvirág<br>
                <input type="radio" name="noveny" value="Gerbera">Gerbera<br>
                <input type="radio" name="noveny" value="Szobai Futóka">Szobai Futóka<br>
                <input type="radio" name="noveny" value="Rákvirág">Rákvirág<br>
                <input type="radio" name="noveny" value="Zöldike">Zöldike<br>
                <input type="radio" name="noveny" value="Borostyán">Borostyán<br>
                <input type="radio" name="noveny" value="Azálea">Azálea<br>
                <input type="radio" name="noveny" value="Anyósnyelv">Anyósnyelv<br>
                <input type="radio" name="noveny" value="Tarka Sárkányfa">Tarka Sárkányfa<br>
                <input type="radio" name="noveny" value="Filodendron">Filodendron<br>
            </div>

            <div class="right-side">
                <textarea class="velemeny" rows="7" cols="40" placeholder="Irja le a véleményét a növényről/virágról és hogy találkozott-e már vele? "></textarea>

                <div class="textin">
                    Itt lesz valami hosszu szoveg amit ide fogok irni <br>
                    <input type="text" name="masiknoveny">
                </div>
            </div>
        </form>

    </div>

Answer 2

Вы можете использовать свойство flex, чтобы выровнять их так, как вы хотите.Это очень сильное свойство CSS и может быть использовано для создания любого макета.

код ниже должен помочь вам понять и начать с ним.

Подробнее о flex: https://codepen.io/enxaneta/full/adLPwv/

.layout {
  display: flex;
}

.right-side {
  display: flex;
  flex-direction: column;
}

.szavazas {
  margin-left: 5%;
  margin-top: 3%;
}

.raddio {
  float: left;
  width: 200px;
  margin-bottom: 5%;
  color: white;
  background: green;
  border-radius: 8px;
  border: 1px solid #003300;
  text-align: left;
  box-shadow: 0 0 2px 1px black;
  height: 350px;
}

input[type="radio"] {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
}

.velemeny {
  float: left;
  box-shadow: 0 0 2px 1px black;
  width: 200px;
  height: 175px;
}

.textin {
  float: left;
  border: 1px solid black;
  background-color: #003300;
  color: white;
  width: 200px;
  height: 165px;
}

<div class="layout">
  <div class="left-side">
    <form class="raddio" action="/action_page.php">
      <input type="radio" name="noveny" value="Nagy Flamingóvirág">Nagy Flamingóvirág<br>
      <input type="radio" name="noveny" value="Gerbera">Gerbera<br>
      <input type="radio" name="noveny" value="Szobai Futóka">Szobai Futóka<br>
      <input type="radio" name="noveny" value="Rákvirág">Rákvirág<br>
      <input type="radio" name="noveny" value="Zöldike">Zöldike<br>
      <input type="radio" name="noveny" value="Borostyán">Borostyán<br>
      <input type="radio" name="noveny" value="Azálea">Azálea<br>
      <input type="radio" name="noveny" value="Anyósnyelv">Anyósnyelv<br>
      <input type="radio" name="noveny" value="Tarka Sárkányfa">Tarka Sárkányfa<br>
      <input type="radio" name="noveny" value="Filodendron">Filodendron<br>
    </form>
  </div>

  <div class="right-side">
    <textarea class="velemeny" rows="7" cols="40" placeholder="Irja le a véleményét a növényről/virágról és hogy találkozott-e már vele? "></textarea>

    <form class="textin" action="/action_page.php">
      Itt lesz valami hosszu szoveg amit ide fogok irni <br>
      <input type="text" name="masiknoveny">
    </form>
  </div>
</div>