html - 标签很长时标签重叠文本框 - css

Question

我有这个呈现为文本区域的 asp 控件，并应用了一些 css 使其看起来很酷，但我遇到了一个问题，如果我有一个长标签，它会与文本框重叠，所以我可以使用任何 css添加以在问题变长时将文本框向下推？在我的表单中，我将宽度设置为 50%，这会将文本推到 2 行然后重叠

*,
*:before,
*:after {
  box-sizing: border-box;
}

#formQuestions {
  width: 500px;
  margin: 2em auto;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 25px;
}

.float-label .control {
  float: left;
  position: relative;
  width: 100%;
  border-bottom: 1px solid #ddd;
  padding-top: 23px;
  padding-bottom: 10px;
}

.float-label .control.small {
  width: 30%;
  border-right: 1px solid #ddd;
}

.float-label .control.medium {
  width: 70%;
  padding-left: 10px;
}

.float-label .control:last-child {
  border: 0;
}

.float-label input,
.float-label textarea {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  overflow-y: hidden;
  border: none;
  border-left: 1px solid rgb(204, 204, 204);
  border-right: 1px solid rgb(204, 204, 204);
  border-bottom: 1px solid rgb(204, 204, 204);
  overflow: auto;
}

.float-label input+label,
.float-label textarea+label {
  position: absolute;
  top: 10px;
  transition: top 0.7s ease, opacity 0.7s ease;
  opacity: 0;
  font-size: 18px;
  font-weight: 600;
  color: #ccc;
}

.float-label input:valid+label,
.float-label textarea:valid+label {
  opacity: 1;
  top: 3px;
}

.float-label input:focus+label,
.float-label textarea:focus+label {
  color: #2c8efe;
}

  

 <div id="formQuestion" class="float-label" spellcheck="false">
    <div class="divJobDescription">
        <h3><b>Job Description</b></h3>
        <div class="control">
            <textarea name="ctl00$ContentPlaceHolder1$Details1$ProjectReviewForm1$txtDeliverables$TextBox1" rows="2" cols="20" id="ctl00_ContentPlaceHolder1_Details1_ProjectReviewForm1_txtDeliverables_TextBox1" title="Please provide a meaningful description for your project, this will be used in bids" style="width: 80%;">
Data pulled from job search</textarea>
            <label for="ctl00_ContentPlaceHolder1_Details1_ProjectReviewForm1_txtDeliverables_TextBox1" id="ctl00_ContentPlaceHolder1_Details1_ProjectReviewForm1_txtDeliverables_Label1">Please provide a meaningful description for your project, this will be used in bids</label>
        </div>
    </div>

Answer 1

你可以删除 position:absolute;在标签上并将其添加到您的 .control div 中:

display: flex;
flex-flow: column-reverse wrap;

如您所见:https://caniuse.com/#search=flex现在到处都支持 Flex。还有一些小问题，但不是我给你的属性。