如何使用css3並排放置兩個div

Question

我有完整的div，其中有兩個div：一個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網格。

值得您花時間閱讀一些有關標記和樣式的最佳做法。 那里存在許多問題，可能會進一步導致您遇到一些問題。