Question

我似乎无法弄清楚为什么这两个div不会彼此相邻。

现在右边的div位于右上方，右边的div位于右下方。右对齐。

.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，我使用{{1} }）：

＆＃13;

box-sizing: border-box

＆＃13;

.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;
}

＆＃13;

Answer 2

你的<div>太宽，很可能是因为你填充了5px。您可以将填充物粘贴在子级div中以缓解您的问题。

提示：在您的浏览器中使用F12开发人员工具（根据您的浏览器可能会有所不同，因此您可以突出显示部分并检查显示元素大小的实际boxmodel结果。

Answer 3

我意识到你收到了你想要的结果，但我相信你明白为什么会发生这种情况很重要。

<div>默认显示为block，这意味着无论你分配的宽度是什么，它都会掉到它自己的行上。我建议给它一个内联块显示。

您还必须知道，在显示内联块或块浏览器的元素上，它们之间会呈现空白区域。你可以通过几种不同的方式摆脱白色空间。

我最喜欢的两种方式＆amp;最干净的方式：

方法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中实现，因此可以在动态代码和实现中实现。很干净。
缺点：需要父元素＆amp;必须将子空格值重置为正常值。

将两个div放在一起之后，右边的一个位于底部

3 个答案: