如何在不设置宽度的情况下将两个div放在同一行上？

115

克里斯·洛克

这是我应该如何使divs内联吗？还是有一种必须要做的语义方式？当我将div设置为内联并向左浮动时，只有它们不内联，它们才会停留，因为任何人都可以提前向我解释这一点，谢谢。我之所以将package打包为其他两个div的容器，是为了使其内联，并希望使其他两个div内联，但是它没有用。

当前代码：

.packages {} .basic {
  width: 460px;
  display: inline;
  float: left;
  margin: 10px 10px 0px 10px;
}
.advanced {
  width: 460px;
  display: inline;
  float: left;
  margin: 10px 10px 0px 10px;
}

<div class="packages">
  <div class="basic">
    <h3>Basic Package</h3>
    <p>Lorem ipsum dolor sit amet, usu dicit vituperata eu. Doctus utroque efficiendi vis id, cum dicunt possim officiis cu. At quod vidisse nam. Mentitum posidonium ex pro, ad blandit.</p>
    <p><a href="#">Learn More</a>
    </p>
  </div>
  <div class="advanced">
    <h3>Advanced Package</h3>
    <p>Lorem ipsum dolor sit amet, usu dicit vituperata eu. Doctus utroque efficiendi vis id, cum dicunt possim officiis cu. At quod vidisse nam. Mentitum posidonium ex pro, ad blandit</p>
    <p><a href="#">Learn More</a>
    </p>
  </div>
</div>

识字

为width设置calc(50% - 20px)。这20px是因为利润。通过这种方式，您可以保持利润。

有例子：

.packages {} .basic {
  width: calc(50% - 20px);
  display: inline;
  float: left;
  margin: 10px 10px 0px 10px;
}
.advanced {
  width: calc(50% - 20px);
  display: inline;
  float: left;
  margin: 10px 10px 0px 10px;
}

<div class="packages">
  <div class="basic">
    <h3>Basic Package</h3>
    <p>Lorem ipsum dolor sit amet, usu dicit vituperata eu. Doctus utroque efficiendi vis id, cum dicunt possim officiis cu. At quod vidisse nam. Mentitum posidonium ex pro, ad blandit.</p>
    <p><a href="#">Learn More</a>
    </p>
  </div>
  <div class="advanced">
    <h3>Advanced Package</h3>
    <p>Lorem ipsum dolor sit amet, usu dicit vituperata eu. Doctus utroque efficiendi vis id, cum dicunt possim officiis cu. At quod vidisse nam. Mentitum posidonium ex pro, ad blandit</p>
    <p><a href="#">Learn More</a>
    </p>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。