html - 如何使用css3并排放置两个div

Question

我有一个完整的 div，其中有两个 div:一个用于图像，另一个用于表单。这两个 div 应该并排放置。问题是表单 div 位于图像下方，而不是与图像并排。这是错误图片:

我已经尝试过但没有得到所需的结果。

两个 div 都应该对所有设备响应

.container {
  width: 960px;
  margin: 0px auto;
}

#left-column {
  height: 500px;
  width: 700px;
  float: left;
  background-color: blue;
}

#right-column {
  height: 500px;
  width: 260px;
  float: left;
  background-color: orange;
}

@media screen and (max-width:959px) {
  .container {
    width: 100%;
  }
  #left-column {
    width: 70%;
  }
  #right-column {
    width: 30%;
  }
  img {
    width: 100%;
  }
}

@media screen and (max-width:640px) {
  #left-column {
    width: 100%;
  }
  #right-column {
    width: 100%;
  }
}

@media screen and (max-width:320px) {
  .container {
    width: 320px;
  }
}

<div class="container">
  <img src="images/banner.jpg" />

  <section id="left-column">
    <img src="images/future.jpg" style="height:500px; width:700px;">
  </section>

  <aside id="right-column">
    <div class="col-md-4">
      <div class="container">

        <div class="form-row">
          <div class="form-group">
            <label for="name"></label>
            <input type="text" class="form-control" id="fullname" name="fullname" value="" placeholder="ENTER NAME" required>
          </div>
          <div class="form-group">
            <label for="email"></label>
            <input type="email" class="form-control" id="email" name="email" value="" placeholder="ENTER EMAIL" required>
          </div>
        </div>

        <div class="form-group">
          <label for="mobile"></label>
          <input type="text" class="form-control" id="mobile" name="mobile" pattern="[0-9]{10}" maxlength="16" value="" placeholder="ENTER MOBILE NUMBER" required>
        </div>
        <div class="form-group">
          <label for="location"></label>
          <input type="text" class="form-control" id="location" name="location" value="" placeholder="ENTER LOCATION" required>
        </div>
        <div class="form-group">
          <select class="form-control" id="program" name="program" required>
            <option value="program">SELECT YOUR PROGRAM</option>
            <option value="PG Diploma Programs">PG Diploma Programs</option>
            <option value="Diploma Programs">Diploma Programs</option>
            <option value="Certificate Programs">Certificate Programs</option>
          </select>
        </div>
        <label style="font-color:white;" for="business">PLEASE SELECT YOUR DATE OF BIRTH
								<div class="nogap">
									<select name="day" class="form-control col-md-4"  id="numberRooms">
										<option value="dateofbirth">DD</option>
										<option value="0">DD</option>
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
										<option value="5">5</option>
										<option value="6">6</option>
										<option value="7">7</option>
										<option value="8">8</option>
										<option value="9">9</option>
										<option value="10">10</option>
										<option value="11">11</option>
										<option value="12">12</option>
										<option value="13">13</option>
										<option value="14">14</option>
										<option value="15">15</option>
										<option value="16">16</option>
										<option value="17">17</option>
										<option value="18">18</option>
										<option value="19">19</option>
										<option value="20">20</option>
										<option value="21">21</option>
										<option value="22">22</option>
										<option value="23">23</option>
										<option value="24">24</option>
										<option value="25">25</option>
										<option value="26">26</option>
										<option value="27">27</option>
										<option value="28">28</option>
										<option value="29">29</option>
										<option value="30">30</option>
										<option value="31">31</option>
									</select>
									<select name="month" class="form-control col-md-4" id="numberBeds">
										<option value="0">MM</option>
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
										<option value="5">5</option>
										<option value="6">6</option>
										<option value="7">7</option>
										<option value="8">8</option>
										<option value="9">9</option>
										<option value="10">10</option>
										<option value="11">11</option>
										<option value="12">12</option>  
									</select>
									<select class="form-control col-md-4" name="year" id="year">
										<option  value="0">YYYY</option>
										<option  value="1960">1960</option>
										<option  value="1961">1961</option>
										<option  value="1962">1962</option>
										<option  value="1963">1963</option>
										<option  value="1964">1964</option>
										<option  value="1965">1965</option>
										<option  value="1966">1966</option>
										<option  value="1967">1967</option>
										<option  value="1968">1968</option>
										<option  value="1969">1969</option>
										<option  value="1970">1970</option>
										<option  value="1971">1971</option>
										<option  value="1972">1972</option>
										<option  value="1973">1973</option>
										<option  value="1974">1974</option>
										<option  value="1975">1975</option>
										<option  value="1976">1976</option>
										<option  value="1977">1977</option>
										<option  value="1978">1978</option>
										<option  value="1979">1979</option>
										<option  value="1980">1980</option>
										<option  value="1981">1981</option>
										<option  value="1982">1982</option>
										<option  value="1983">1983</option>
										<option  value="1984">1984</option>
										<option  value="1985">1985</option>
										<option  value="1986">1986</option>
										<option  value="1987">1987</option>
										<option  value="1988">1988</option>
										<option  value="1989">1989</option>
										<option  value="1990">1990</option>
										<option  value="1991">1991</option>
										<option  value="1992">1992</option>
										<option  value="1993">1993</option>
										<option  value="1994">1994</option>
										<option  value="1995">1995</option>
										<option  value="1996">1996</option>
										<option  value="1997">1997</option>
										<option  value="1998">1998</option>
										<option  value="1999">1999</option>
										<option  value="2000">2000</option>
									</select>
								</div>
							</label>
        <div class="form-group">
          <div class="checkbox">
            <label><input type="checkbox" name="terms" value="check"><p>I allow NMIMS Distance Learning to contact me to provide details</p></label>
          </div>
          <div class="wrapper">
            <!---<input type="submit" id= "submit" name="submit" value="Submit"/>-->
            <input type="submit" id="submit" name="submit" class="btn btn-primary" value="SEND ENQUIRY">
          </div>
        </div>
      </div>
    </div>
  </aside>
</div>

Answer 1

看起来您正在使用 Bootstrap 作为 CSS 框架。在那种情况下，我建议您查看他们关于使用 Bootstrap 网格的文档:https://getbootstrap.com/docs/3.3/examples/grid/类似于以下内容将为您提供响应式 2 列布局

<div class="container">
   <div class="row">
        <div class="col-sm-6">left column</div>
        <div class="col-sm-6">right column</div>
    </div>
</div>

要使用 CSS 实现类似效果，您可以执行以下操作:

.col-1,
.col-2 {
   display: inline-block;
   width: 50%;
}
@media screen and (max-width: 720px) {
    .col-1,
    .col-2 {
      display: block;
      width: 100%;
    }
}

这不是实现 2 列响应式布局的唯一方法，但我希望它能给您一些指导。您还可以尝试使用 float 、 flexbox 或更新的 CSS 网格。

花时间阅读有关标记和样式的最佳做法是值得的。那里有许多问题可能会导致您进一步遇到一些问题。