как разместить два div рядом, используя css3 - PullRequest
Новая
       4

как разместить два div рядом, используя css3

0 голосов
/ 01 октября 2018

У меня есть полный 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>

1 Ответ

0 голосов
/ 01 октября 2018

Похоже, вы используете 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.

Стоило бы потратить некоторое время на ознакомление с лучшими практиками для вашей разметки и стиля.Там есть ряд проблем, которые могут вызвать некоторые проблемы в дальнейшем.

...