调整窗口输入框的大小向左折叠

时间：2020-01-16 10:12:28

标签： javascript jquery html css

在此项目中（仅适用于javascript（jquery），css和HTML5）尝试将输入保持在接受描述的右侧，例如以下图片显示

但是，当我调整大小时，输入框会折叠到说明的左侧，例如照片展示。

所以我的问题是我该如何解决这个问题，即使在调整大小时也始终将输入保持在右侧。我将粘贴一些与这些div相关的代码

.leftPane {
  position: relative;
  float: left;
  width: 100%;
  padding-left: 100px;
  padding-top: 50px;
  resize: both;
}

.rightPane {
  position: relative;
  float: left;
  width: 100%;
  padding-left: 100px;
  padding-top: 50px;
  resize: both;
}

@media (max-height: 860px) {
  .leftPane {
    position: relative;
    float: left;
    width: 50%;
    padding: 0;
  }
  .rightPane {
    position: relative;
    float: left;
    width: 50%;
    padding: 0;
  }
}

#steps {
  width: 600px;
  /*height:320px;*/
}

.step {
  float: left;
  width: 600px;
  /*height:320px;*/
  height: inherit;
  overflow-y: auto;
}
<div id="content">
  <h1 id="contentTitle">ETAP Ley configurator</h1>
  <div id="wrapper">
    <div id="steps" class="steps">
      <form id="formElem" name="formElem" action="" method="post">
        <!-- Project Definitions -->
        <fieldset class="step">
          <legend id="stepTitle_0">Project Definition</legend>
          <div id="stepDesc_0" class="txtbox">
            Create light lines with Ley, the modular lighting system. Draw your own personalized configuration here. Choose short or long lines, straight or angled, with or without uplight, suspended, ceiling mounted or wall mounted… The possibilities are endless!
            <br><br>
            <!-- Please fill in the projet data -->
            Please fill in the project information
          </div>
          <!--  Left Pane -->
          <div class="rightPane" id="Pane">
            <p style="padding:5px 0"><label id="projLabel">Project</label></p>
            <p>
              <label for="pname" id="pname_lbl">Name</label>
              <input id="pname" name="pname" type="text" AUTOCOMPLETE=OFF />
            </p>
            <p>
              <label for="proom" id="proom_lbl">Room</label>
              <input id="proom" name="proom" type="text" placeholder="e.g. Main Hall" AUTOCOMPLETE=OFF />
            </p>
            <p>
              <label for="paddr" id="paddr_lbl">Address</label>
              <input id="paddr" name="paddr" type="text" AUTOCOMPLETE=OFF />
            </p>
            <p>
              <label for="date" id="date_lbl">Date</label>
              <input id="date" name="date" type="text" disabled/>
            </p>
          </div>
          <!--  Right Pane -->
          <div class="leftPane" id="Pane">

            <p><label id="contactLabel">Contact</label></p>
            <p>
              <label for="cname" id="cname_lbl">Name</label>
              <input id="cname" name="cname" type="text" AUTOCOMPLETE=OFF maxlength="11" />
            </p>
            <p>
              <label for="email" id="email_lbl">E-mail</label>
              <input id="email" class="email" name="email" placeholder="e.g. mail@mail.com" AUTOCOMPLETE=OFF onBlur="checkEmail(this.value)" />

            </p>
            <p>
              <label for="phone" id="phone_lbl">Phone</label>
              <input id="phone" name="phone" placeholder="e.g. +3233100211" type="number" onkeydown="return event.keyCode !== 69" AUTOCOMPLETE=OFF/>
            </p>
            <p>
              <label for="caddr" id="caddr_lbl">Address</label>
              <input id="caddr" name="caddr" type="text" AUTOCOMPLETE=OFF />
            </p>
            <p>
              <label for="country" id="country_lbl">Country</label>
              <select id="country" name="country">
                <option value='blank' disabled selected value> </option>
                <option value='be' id="country_op0">Belgium</option>
                <option value='lu' id="country_op1">Luxembourg</option>
                <option value='fr' id="country_op2">France</option>
                <option value='de' id="country_op3">Germany</option>
                <option value='nl' id="country_op4">The Netherlands</option>
                <option value='pt' id="country_op5">Portugal</option>
                <option value='es' id="country_op6">Spain</option>
                <option value='se' id="country_op7">Sweden</option>
                <option value='other' id="country_op8">Other</option>
              </select>
            </p>
          </div>

1 个答案:

答案 0 :(得分：0)

我将您的代码转换为display: flex;，您可以用更少的代码来实现

检查代码段： 

.content {
  display: flex;
}

.leftPane,.rightPane {
  flex: 1 1 auto;
}
<div id="content">
  <h1 id="contentTitle">ETAP Ley configurator</h1>
  <div id="wrapper">
    <div id="steps" class="steps">
      <form id="formElem" name="formElem" action="" method="post">
        <!-- Project Definitions -->
        <fieldset class="step">
          <legend id="stepTitle_0">Project Definition</legend>
          <div id="stepDesc_0" class="txtbox">
            Create light lines with Ley, the modular lighting system. Draw your own personalized configuration here. Choose short or long lines, straight or angled, with or without uplight, suspended, ceiling mounted or wall mounted… The possibilities are endless!
            <br><br>
            <!-- Please fill in the projet data -->
            Please fill in the project information
          </div>
          <!--  Left Pane -->
          <div class="content">
            <div class="rightPane" id="Pane">
              <p style="padding:5px 0"><label id="projLabel">Project</label></p>
              <p>
                <label for="pname" id="pname_lbl">Name</label>
                <input id="pname" name="pname" type="text" AUTOCOMPLETE=OFF />
              </p>
              <p>
                <label for="proom" id="proom_lbl">Room</label>
                <input id="proom" name="proom" type="text" placeholder="e.g. Main Hall" AUTOCOMPLETE=OFF />
              </p>
              <p>
                <label for="paddr" id="paddr_lbl">Address</label>
                <input id="paddr" name="paddr" type="text" AUTOCOMPLETE=OFF />
              </p>
              <p>
                <label for="date" id="date_lbl">Date</label>
                <input id="date" name="date" type="text" disabled/>
              </p>
            </div>
            <!--  Right Pane -->
            <div class="leftPane" id="Pane">

              <p><label id="contactLabel">Contact</label></p>
              <p>
                <label for="cname" id="cname_lbl">Name</label>
                <input id="cname" name="cname" type="text" AUTOCOMPLETE=OFF maxlength="11" />
              </p>
              <p>
                <label for="email" id="email_lbl">E-mail</label>
                <input id="email" class="email" name="email" placeholder="e.g. mail@mail.com" AUTOCOMPLETE=OFF onBlur="checkEmail(this.value)" />

              </p>
              <p>
                <label for="phone" id="phone_lbl">Phone</label>
                <input id="phone" name="phone" placeholder="e.g. +3233100211" type="number" onkeydown="return event.keyCode !== 69" AUTOCOMPLETE=OFF/>
              </p>
              <p>
                <label for="caddr" id="caddr_lbl">Address</label>
                <input id="caddr" name="caddr" type="text" AUTOCOMPLETE=OFF />
              </p>
              <p>
                <label for="country" id="country_lbl">Country</label>
                <select id="country" name="country">
                  <option value='blank' disabled selected value> </option>
                  <option value='be' id="country_op0">Belgium</option>
                  <option value='lu' id="country_op1">Luxembourg</option>
                  <option value='fr' id="country_op2">France</option>
                  <option value='de' id="country_op3">Germany</option>
                  <option value='nl' id="country_op4">The Netherlands</option>
                  <option value='pt' id="country_op5">Portugal</option>
                  <option value='es' id="country_op6">Spain</option>
                  <option value='se' id="country_op7">Sweden</option>
                  <option value='other' id="country_op8">Other</option>
                </select>
              </p>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

相关问题
最新问题