html - 将输入粘贴到 div

Question

我在将输入粘贴到 div 时遇到问题。当我尝试缩小页面时，一切都崩溃了。可能，我也 想知道我是否在点击每个页面(右，左，上，下)后不开发选项 radio 和输入 分别地。我怎样才能做到这一点？每个边缘都可以有不同的处理，所以我需要一个 radio 和输入 边。

<div class="kwadratObrobka" style=" margin-top: 5%; font-family: 'Fira Sans', sans-serif; font-size:50%; text-align: center;" id="kwadratObrobka" name="kwadratObrobka"><br>
  <div class="gora" id="gora" name="gora">
    <form action="">
      <input type="radio" name="gora" value="zgrzew">zgrzew<br>
      <input type="radio" name="gora" value="tunel">tunel<br>
      <input type="radio" name="gora" value="szycie">szycie<br>
      <input type="radio" name="gora" value="dociecie">docięcie<br>oczka co:
      <input style="display: inline-block; max-width:5%; min-width:5%; max-height:3%; margin-left: 1%;" type="number" name="goraoczka" value=""><br>
      tunel cm: <input style="display: inline-block; max-width:5%; min-width:5%; max-height:3%; margin-left: 1%;" type="number" name="goratunel" value=""><br>
    </form>
  </div>

  <div class="lewy" id="lewy" name="lewy" style="float: left; margin-left: 30%; margin-top: 4%;">
    <form action="">
      <input type="radio" name="lewy" value="zgrzew"> zgrzew<br>
      <input type="radio" name="lewy" value="tunel"> tunel<br>
      <input type="radio" name="lewy" value="szycie"> szycie<br>
      <input type="radio" name="lewy" value="dociecie"> docięcie<br>
      oczka co:<input style="display: inline-block; max-width:30%; min-width:30%; margin-left: 1%;" type="number" name="lewyoczka" value=""><br>
      tunel cm:<input style="display: inline-block; max-width:30%; min-width:30%; margin-left: 1%;" type="number" name="lewytunel" value=""><br>
    </form>
  </div>

  <div class="prawy" id="prawy" name="prawy" style="float: right; margin-right: 30%; margin-top: 4%;">
    <form action="">
      <input type="radio" name="prawy" value="zgrzew"> zgrzew<br>
      <input type="radio" name="prawy" value="tunel"> tunel<br>
      <input type="radio" name="prawy" value="szycie"> szycie<br>
      <input type="radio" name="prawy" value="dociecie"> docięcie<br>
      oczka co:<input style="display: inline-block; max-width:30%; min-width:30%; margin-left: 1%;" type="number" name="lewyoczka" value=""><br>
      tunel cm:<input style="display: inline-block; max-width:30%; min-width:30%; margin-left: 1%;" type="number" name="lewytunel" value=""><br>
    </form>
  </div>

  <div class="kwadrat" id="kwadrat" name="kwadrat" style="margin-left: auto; margin-right: auto; background: url('https://') ; background-size: 100%; margin-bottom: -30px;  margin-top: 10px; height: 150px; width: 150px; border: 1px dotted BLACK"></div>

  <div class="dol" id="dol" name="dol" style="margin-top: 4%;">
    <form action="">
      <input type="radio" name="dol" value="zgrzew"> zgrzew<br>
      <input type="radio" name="dol" value="tunel"> tunel<br>
      <input type="radio" name="dol" value="szycie"> szycie<br>
      <input type="radio" name="dol" value="dociecie"> docięcie<br>
      oczka co: <input style="display: inline-block; max-width:5%; min-width:5%; max-height:3%; margin-left: 1%;" type="number" name="goraoczka" value=""><br>
      tunel cm: <input style="display: inline-block; max-width:5%; min-width:5%; max-height:3%; margin-left: 1%;" type="number" name="goratunel" value=""><br>
    </form>
  </div>
</div>

示例:https://jsfiddle.net/jwe8h49z/

Answer 1

添加如下样式，就不会断了

div#prawy,div#lewy {
    width: 50%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin: 0 !important;
}