После помещения двух divs друг на друга, один справа внизу

Question

Я не могу понять, почему два divs не находятся рядом друг с другом.

Прямо сейчас справа находится верхний справа, а справа находится справа справа. & выровненный справа.

.quotes { 
 
    background-color: #ebeaeb; 
 
    display: block; 
 
} 
 
@media (min-width: 1366px) { 
 
    .quotes { 
 
    width: 1280px; 
 
    } 
 
    .ipad { 
 
    width: 55%; 
 
    } 
 
} 
 
@media (min-width: 1024px) and (max-width: 1365px) { 
 
    .quotes { 
 
    width: 992px; 
 
    } 
 
    .ipad { 
 
    width: 70%; 
 
    } 
 
} 
 
@media (min-width: 768px) and (max-width: 1023px) { 
 
    .quotes { 
 
    width: 766px; 
 
    } 
 
    .ipad { 
 
    width: 90%; 
 
    } 
 
} 
 
.ipad-div { 
 
    display: inline-block; 
 
    width: 50%; 
 
    background: #777; 
 
    padding: 5px; 
 
} 
 
.card-div { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    background: yellow; 
 
    width: 49%; 
 
    padding: 5px; 
 
}

<div class="quotes" id="main-quotes"> 
 
    <div align="left"> 
 
    <div class="ipad-div" align="right" id="ipad-my-div"> 
 
     <img class="ipad" src="images/pricing/ipad.png" alt="iPad"> 
 
     <div align="center" class="try-end-ipad" data-700-end="opacity: 1" data-600-end="opacity: 0"> 
 
     <font class="try-free">Try Hubdoc for FREE</font> 
 
     <img class="price" src="images/pricing/price.png" alt="$19/m"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div align="right"> 
 
    <div class="card-div" align="left"> 
 
     <section> 
 
     <div align="center" class="try-end"> 
 
      <font class="try-free">Try Hubdoc for FREE</font> 
 
      <img class="price" src="images/pricing/price.png" alt="$19/m"> 
 
     </div> 
 
     <div class="receipt-1 serrated-top" align="center"> 
 
      <font class="eye-i"><i class="fa fa-eye"></i></font> 
 
      <font class="one-title"><br>Automatically extracts<br> 
 
           key data from</font> 
 
      <img class="papers-1" src="images/pricing/papers.png" alt="bank statements"> 
 

 
      <div class="col-1-left" align="left"> 
 
      <font class="checkmark-1"><i class="fa fa-check"></i></font> <font class="check-text">bills</font> 
 
      <br> 
 
      <font class="checkmark-1"><i class="fa fa-check"></i></font> <font class="check-text">statements</font> 
 
      </div> 
 
      <div class="col-1-right" align="left"> 
 
      <font class="checkmark-1"><i class="fa fa-check"></i></font> <font class="check-text">invoices</font> 
 
      <br> 
 
      <font class="checkmark-1"><i class="fa fa-check"></i></font> <font class="check-text">receipts</font> 
 
      </div> 
 
     </div> 
 
     </section>

Answer 1

Для достижения этой цели, вы будете нужно использовать либо float или абсолютное позиционирование

Вот пример использования float (также обивка добавляет к ширине Элементом, так что вы должны либо использовать box-sizing: border-box или calc, я box-sizing: border-box).

.quotes { 
 
    background-color: #ebeaeb; 
 
    display: block; 
 
} 
 
@media (min-width: 1366px) { 
 
    .quotes { 
 
    width: 1280px; 
 
    } 
 
    .ipad { 
 
    width: 55%; 
 
    } 
 
} 
 
@media (min-width: 1024px) and (max-width: 1365px) { 
 
    .quotes { 
 
    width: 992px; 
 
    } 
 
    .ipad { 
 
    width: 70%; 
 
    } 
 
} 
 
@media (min-width: 768px) and (max-width: 1023px) { 
 
    .quotes { 
 
    width: 766px; 
 
    } 
 
    .ipad { 
 
    width: 90%; 
 
    } 
 
} 
 
.ipad-div { 
 
    float: left; 
 
    box-sizing: border-box; 
 
    width: 50%; 
 
    background: #777; 
 
    padding: 5px; 
 
} 
 
.card-div { 
 
    float: right; 
 
    box-sizing: border-box; 
 
    vertical-align: top; 
 
    background: yellow; 
 
    width: 50%; 
 
    padding: 5px; 
 
}

<div class="quotes" id="main-quotes"> 
 
    <div class="ipad-div" align="right" id="ipad-my-div"> 
 
     <img class="ipad" src="images/pricing/ipad.png" alt="iPad"> 
 
     <div align="center" class="try-end-ipad" data-700-end="opacity: 1" data-600-end="opacity: 0"> 
 
     <font class="try-free">Try Hubdoc for FREE</font> 
 
     <img class="price" src="images/pricing/price.png" alt="$19/m"> 
 
     </div> 
 
    </div> 
 

 
    <div class="card-div" align="left"> 
 
     <section> 
 
     <div align="center" class="try-end"> 
 
      <font class="try-free">Try Hubdoc for FREE</font> 
 
      <img class="price" src="images/pricing/price.png" alt="$19/m"> 
 
     </div> 
 
     <div class="receipt-1 serrated-top" align="center"> 
 
      <font class="eye-i"><i class="fa fa-eye"></i></font> 
 
      <font class="one-title"><br>Automatically extracts<br> 
 
           key data from</font> 
 
      <img class="papers-1" src="images/pricing/papers.png" alt="bank statements"> 
 

 
      <div class="col-1-left" align="left"> 
 
      <font class="checkmark-1"><i class="fa fa-check"></i></font> <font class="check-text">bills</font> 
 
      <br> 
 
      <font class="checkmark-1"><i class="fa fa-check"></i></font> <font class="check-text">statements</font> 
 
      </div> 
 
      <div class="col-1-right" align="left"> 
 
      <font class="checkmark-1"><i class="fa fa-check"></i></font> <font class="check-text">invoices</font> 
 
      <br> 
 
      <font class="checkmark-1"><i class="fa fa-check"></i></font> <font class="check-text">receipts</font> 
 
      </div> 
 
     </div> 
 
     </section>

Answer 2

Ваших <div> с слишком широк, скорее всего, из-за вашу обивку 5px. Вы можете поместить прокладку внутри поддиректа уровня, чтобы облегчить вашу проблему.

. СОВЕТ: Используйте F12 в вашем браузере для инструментов разработчика (может отличаться в зависимости от вашего браузера, так что вы можете выделить разделы и проверить фактические результаты boxmodel показывают точный размер ваших элементов

Answer 3

Я понимаю, что вы получили результаты, которые вы хотели, но я считаю, что это важно, вы понимаете, почему это происходит.

<div> дисплей по умолчанию - это блок, это означает, что он будет попадать в свою собственную линию независимо от ширины, которую вы его выделяете. Я рекомендую дать ему отображение встроенного блока.

Вы также должны знать, что на элементах с дисплеем встроенных блочных или блочных браузеров визуализируются белые пробелы между ними. Вы можете избавиться от белого пространства несколькими разными способами.

Мои 2 любимых способов & чистейшие пути:

Метод 1:

<div id='elm1'></div><!-- 
--><div id='elm2'></div> 

Плюсы: Легкий, чистый, & требует не родительский элемент.
Против: не может быть имплимент в динамическом коде & может дать вам возможность читать код.

Метод 2:

<div id='parent'> 
    <div id='elm1'></div> 
    <div id='elm2'></div> 
</div> 

#parent{white-space:nowrap;} 
#parent > div{display:inline-block; white-space:normal;} 

Плюсы: Реализована в CSS, поэтому он может быть реализован в динамическом коде & чист.
Минусы: Требует, чтобы родительский элемент & должен восстановить нормальные значения белого белого.