Question

我在将输入粘贴到div时遇到问题。当我尝试缩小页面时，一切都崩溃了。可能我也想知道是否在单击每页（右，左，上和下）后不开发收音机选项并输入分别。我该如何实现？每个边缘可以有不同的处理，所以我需要一个收音机并在每个边缘上输入一侧。

<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;
}

Answer 2

希望您没有使用任何CSS框架，使用CSS inline-block和width: calc(50% - 75px)可以解决此问题，如下所示

.d-inline-block {
  display: inline-block;
  text-align: left;
  max-width: 150px;
}

input[type="number"] {
  width: 50px
}

<div class="kwadratObrobka" style="margin-top: 40px; text-align: center;" id="kwadratObrobka" name="kwadratObrobka">
  <div class="gora" id="gora" name="gora">
    <form class="d-inline-block">
      <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 type="number" name="goraoczka" value=""><br>
      tunel cm: <input type="number" name="goratunel" value=""><br>
    </form>
  </div>

  <div class="lewy" id="lewy" name="lewy" style="float: left; margin-top: 40px; width: calc(50% - 75px); text-align: right">
    <form class="d-inline-block" style="margin-right: 40px">
      <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 type="number" name="lewyoczka" value=""><br>
      tunel cm:<input type="number" name="lewytunel" value=""><br>
    </form>
  </div>

  <div class="prawy" id="prawy" name="prawy" style="float: right; margin-top: 40px; width: calc(50% - 75px); text-align: left">
    <form class="d-inline-block" style="margin-left: 40px">
      <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 type="number" name="lewyoczka" value=""><br>
      tunel cm:<input type="number" name="lewytunel" value=""><br>
    </form>
  </div>

  <div class="kwadrat" id="kwadrat" name="kwadrat" style="margin-left: auto; margin-right: auto; margin-top: 20px; height: 150px; width: 150px; border: 1px dotted #000"></div>

  <div class="dol" id="dol" name="dol" style="margin-top: 40px">
    <form class="d-inline-block">
      <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 type="number" name="goraoczka" value=""><br>
      tunel cm: <input type="number" name="goratunel" value=""><br>
    </form>
  </div>
</div>

将输入坚持到div

2 个答案: